ReactJS | OnSubmit не является функцией с Formik

Question

У меня есть простая форма Form с React. я использую formik для обработки проверки формы, на frontEnd. Вот мой компонент:

class GroupDetailsForm extends React.Component {
  handleSubmit = values => {
    const { onSubmit } = this.props;
    onSubmit(values);
  };

  render() {
    const { group } = this.props;

    return (
      <Formik
        initialValues={{ ...group }}
        onSubmit={this.handleSubmit}
        validationSchema={validationSchema}
        render={({ values, touched, errors, handleChange, handleBlur, handleSubmit }) => (
          <form onSubmit={handleSubmit}>
            <div className="row">
              <div className="col-md-3">
                <div className="form-group">
                  <label htmlFor="groupName">
                    Group name <span className="text-danger">*</span>
                  </label>
                  <input
                    type="text"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name}
                    name="name"
                    className={classNames('form-control', {
                      'is-invalid': errors.name && touched.name
                    })}
                    id="groupName"
                    placeholder="PaymentsTeam"
                  />
                  {!!errors.name && touched.name && (
                    <div className="text-danger">{errors.name}</div>
                  )}
                </div>
                <div className="form-group">
                  <label htmlFor="groupDescription">Description</label>
                  <textarea
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.description}
                    name="description"
                    className={classNames('form-control', {
                      'is-invalid': errors.description && touched.description
                    })}
                    id="groupDescription"
                    rows="3"
                    placeholder=""
                  />
                  {!!errors.description && touched.description && (
                    <div className="text-danger">{errors.description}</div>
                  )}
                </div>
                <button type="submit">Submit</button>
              </div>
            </div>
          </form>
        )}
      />
    );
  }
}

Когда я нажимаю Отправить, я получаю эту ошибку:

Uncaught (in promise) TypeError: onSubmit is not a function at Object.GroupDetailsForm.values [as onSubmit] (index.jsx:18)

Не уверен, что проблема здесь. Может кто-нибудь помочь? Код кажется нормальным для меня. Я пытался поиграть с ним, получая доступ к OnSubmit в разных частях компонента, а не в самой форме, но безуспешно.

Ошибка, вероятно, что-то тривиальное, но я не вижу этого. Может кто-нибудь помочь???

Вниз вы можете увидеть компонент, который я реализую GroupDetailsForm, Это целый компонент, чтобы было проще.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import GroupDetailsForm from '../../components/GroupDetailsForm';
import { Actions } from '../../actions';

// Importing Styles
import './styles.scss';

export class GroupsCreateScreen extends Component {
  static propTypes = {
    listGroups: PropTypes.func.isRequired
  };

  static defaultProps = {
    securityMode: ''
  };

  componentDidMount() {
    const { listGroups } = this.props;
    listGroups();
  }

  render() {
    const group = {
      name: '',
      description: ''
    };

    return (
      <div className="container mt-5 bg-white p-5">
        <div className="card">
          <div className="card-header">
            <h4>Step 1</h4>
          </div>
          <div className="card-body">
            <GroupDetailsForm group={group} />
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <h4>Step 2</h4>
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <h4>Step 3</h4>
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <h4>Step 4</h4>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  ...state // todo to be refined
});

const mapDispatchToProps = {
  ...Actions
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GroupsCreateScreen);

Answer 1

Вы не проходите мимо onSubmit в качестве опоры GroupDetailsForm, но вы пытаетесь получить к нему доступ с this.props в вашем handleSubmit функция.

Вы можете попробовать это, и это не должно жаловаться not a function больше, очевидно, вам нужно будет передать свою реальную функцию, хотя.

<GroupDetailsForm group={group} onSubmit={values => console.log(values)} />