How to handle redux form submitted data

问题:

im following this tutorial from redux form official page http://redux-form.com/5.3.1/#/getting-started?_k=8q7qyo

there are two issue im facing

1: how to get form data in handleSubmit function or in any other function. so that i can process form data according to my needs.

2: each time when i submit form my page get refresh. i dont want to refresh my page

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;

Updated

回答1:

There are two ways to give redux-form a function to run when your form is submitted:

• Pass it as an onSubmit prop to your decorated component. In which case, you would use onClick={this.props.handleSubmit} inside your decorated component to cause it to fire when the submit button is clicked.
• Pass it as a parameter to the this.props.handleSubmit function from inside your decorated component. In which case, you would use onClick={this.props.handleSubmit(mySubmit)} inside your decorated component to cause it to fire when the submit button is clicked.

Refactored example:

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;

Example from official docs - here