如何处理使用 redux-form 提交

Question

我是第一次使用 redux-form。我能够呈现表单，但无法处理提交。虽然我最终想将数据发送到服务器，但在这一点上，我只是想通过控制台记录表单字段值。我收到错误：

Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

这是我的 Profile.jsx 文件

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withAuth} from 'react-devise';
import { Field, reduxForm } from 'redux-form';

class Profile extends Component {
  handleSubmit(data) {
     console.log('Submission received!', data);
   }
  render() {
    const { handleSubmit } = this.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>
    );
  }
}

// Decorate the form component
Profile = reduxForm({
  form: 'profile' // a unique name for this form
})(Profile);


const mapStateToProps = state => {
  return {
    currentUser: state.currentUser
  };
};

export default connect(mapStateToProps)(withAuth(Profile));

如何处理提交的值，以便最终将它们发送到我的 API？

Answer 1

Redux-Form 使用 handleSubmit 属性装饰你的组件。根据文档，它是：

a function meant to be passed to <form onSubmit={handleSubmit}> or to <button onClick={handleSubmit}>. It will run validation, both sync and async, and, if the form is valid, it will call this.props.onSubmit(data) with the contents of the form data.

Optionally, you may also pass your onSubmit function to handleSubmit which will take the place of the onSubmit prop. For example:

因此，如果您的组件没有 onSubmit 属性，您必须 'manually' 将提交处理程序传递给 handleSubmit 函数。请试试这个：

<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>

请不要将您的 handleSubmit 方法与从 Redux-Form 传递的同名 prop 混淆。

Answer 2

(代表问题作者发布解决方案将其移至答案space).

工作代码：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withAuth} from 'react-devise';
import { Field, reduxForm } from 'redux-form';

class Profile extends Component {
  handleSubmit(data) {
     console.log('Submission received!', data);
   }
  render() {
    return (
      <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
        <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>
    );
  }
}

// Decorate the form component
Profile = reduxForm({
  form: 'profile' // a unique name for this form
})(Profile);


const mapStateToProps = state => {
  return {
    currentUser: state.currentUser
  };
};

export default connect(mapStateToProps)(withAuth(Profile));

如何处理使用 redux-form 提交

How to handleSubmit with a redux-form

reactjs

redux

redux-form

react-redux