如何处理redux表单提交的数据

Question

我正在从 redux 表单官方页面关注本教程 http://redux-form.com/5.3.1/#/getting-started?_k=8q7qyo

我面临两个问题

1: 如何在handleSubmit 函数或任何其他函数中获取表单数据。这样我就可以根据需要处理表单数据了。

2: 每次我提交表单时我的页面都会刷新。我不想刷新我的页面

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class ContactForm extends Component {
  render() {
    const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <input type="text" placeholder="First Name" {...firstName}/>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" placeholder="Last Name" {...lastName}/>
        </div>
        <div>
          <label>Email</label>
          <input type="email" placeholder="Email" {...email}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
  form: 'contact',                           // a unique name for this form
  fields: ['firstName', 'lastName', 'email'] // all the fields in your form
})(ContactForm);

export default ContactForm;

已更新

Answer 1

提交表单后，有两种方法可以为 redux-form 赋予运行功能：

将其作为 onSubmit 道具传递给装饰组件。在这种情况下，您可以在装饰组件中使用 onClick={this.props.handleSubmit} 来使其在单击提交按钮时触发。
将它作为参数从装饰组件内部传递给 this.props.handleSubmit 函数。在这种情况下，您可以在装饰组件中使用 onClick={this.props.handleSubmit(mySubmit)} 以使其在单击提交按钮时触发。

重构示例：

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class ContactForm extends Component {
  submit(formValues) {
    console.log(formValues);
  }
  render() {
    const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit(this.submit)}>
        <div>
          <label>First Name</label>
          <input type="text" placeholder="First Name" {...firstName}/>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" placeholder="Last Name" {...lastName}/>
        </div>
        <div>
          <label>Email</label>
          <input type="email" placeholder="Email" {...email}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
  form: 'contact',                           // a unique name for this form
  fields: ['firstName', 'lastName', 'email'] // all the fields in your form
})(ContactForm);

export default ContactForm;

来自官方文档的示例 - here

如何处理redux表单提交的数据

How to handle redux form submitted data

reactjs

redux

redux-form

react-redux