反应JS | OnSubmit 不是 Formik 的函数

Question

我有一个简单的表单 Form with React。我在前端使用 formik 来处理表单验证。这是我的组件：

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，而是试图从 handleSubmit 函数中的 this.props 访问它。

你可以试试这个，它应该不会再抱怨 not a function，显然你需要传入你的真实函数。

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

反应JS | OnSubmit 不是 Formik 的函数

ReactJS | OnSubmit is not a function with Formik

javascript

function

reactjs

redux

formik