Question

嗨，请帮助。

这是我的第一个redux-form

此错误的含义是什么？如何提交？我在哪里放上onSubmit函数？

感谢您的帮助

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

＆＃13;

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

＆＃13;

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！我希望这会有所帮助。

Answer 2

您需要将提交函数传递给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,
};

Redux-form提交错误

2 个答案: