javascript - Redux-表单提交错误

Question

您好，请问您能帮忙吗？

这是我的第一个 redux 表单

这个错误是什么意思以及如何让它提交？onSubmit 函数应该放在哪里？

感谢您的帮助

createReduxForm.js:84 Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { PropTypes } from 'prop-types';


const EmailForm = (props) => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="lastName">Last Name</label>
        <Field name="lastName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <Field name="email" component="input" type="email" />
      </div>
      <button type="submit">
        Submit
      </button>
    </form>
  );
};

export default reduxForm({
  // a unique name for the form
  form: 'contact',
  // fields: ['firstName', 'lastName', 'email'],
})(EmailForm);

EmailForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

Answer 1

阅读https://redux-form.com/6.6.3/examples/remotesubmit/

    const EmailForm = (props) => {
      const { handleSubmit } = props;
      return (
        <form onSubmit={handleSubmit} >
          <div>
            <label htmlFor="firstName">First Name</label>
            <Field name="firstName" component="input" type="text" />
          </div>
          <div>
            <label htmlFor="lastName">Last Name</label>
            <Field name="lastName" component="input" type="text" />
          </div>
          <div>
            <label htmlFor="email">Email</label>
            <Field name="email" component="input" type="email" />
          </div>
          <button type="submit">
            Submit
          </button>
        </form>
      );
    };

        export default reduxForm({
         onSubmit: submitFunction,  /*this is the place where you need to pass Submit function object*/
          form: 'contact',

        })(EmailForm);

    const submitFunction =(formValues, dispatch)=>{
       /*send formValues to api....or dispatch submit action with 
       formValues*/
      }

这个submitFunction变成了handleSubmit，redux表单将它作为一个prop传递给你的表单!我希望这会有所帮助。