Redux-form 提交错误

Question

您好，请您帮忙。

这是我的第一个 redux-form

这个错误是什么意思，我该如何提交？ 我应该把 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

你需要将你的提交函数传递给handleSubmit，像这样：

onSubmit={handleSubmit(yourSubmitFunction)}

我猜你想从一个容器类中渲染你的 redux-form 组件，它看起来像这样：

容器类：

const mapDispatchToProps = (dispatch) => {
  return {
    //this is your submitfunction which should be passed to handleSubmit
    submitForm: (yourForm) => dispatch(someDispatchedFunction(yourForm))
  }
}

class containerClass extends React.Component {

  constructor(props){
    super(props)
  }


  render(){

    return(
        <div>
          <yourComponent 
          submitForm={this.props.submitForm} />
        </div>
    )
  }
}

你的 redux-form 组件：

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


const EmailForm = (props) => {
  const { handleSubmit, submitForm } = props;
  return (
    <form onSubmit={handleSubmit(submitForm)}>
      <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 2

阅读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 表单将它作为道具传递给您的表单！我希望这会有所帮助。