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*/
      }

这个commitFunction变成handleSubmit，并且redux表单将其作为道具传递给您！ 我希望这有帮助。

Answer 2

您需要将您的Submit函数传递给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形式的组件：

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,
};