reactjs – 如何使用redux-form处理提交

您好我是第一次使用redux-form.我能够呈现表单,但我无法处理提交.虽然我最终想要将数据发送到服务器,但此时,我只是尝试控制日志表单字段值.我收到错误：

错误：您必须传递handleSubmit()一个onSubmit函数或传递onSubmit作为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));

任何redux-form专家都可以帮助指导我以正确的方式处理提交的值,以便最终将它们发送到我的API.谢谢

更新：工作代码：

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使用handleSubmit prop装饰您的组件.根据文档,它是：

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属性,则必须“手动”将提交处理程序传递给handleSubmit函数.请试试这个：

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

请不要将handleSubmit方法与从Redux-Form传递的prop同名.