Question

我有一个带有React的简单表单Form。我在前端使用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)

不确定问题出在哪里。有人可以帮忙吗？该代码对我来说似乎很好。我尝试使用它，在Component的不同部分而不是在表单本身上访问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)} />

ReactJS | OnSubmit不是Formik的函数

1 个答案: