How to handle redux form submitted data

Question

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

it would be helpful if you include some code snippet in case external link is dead — Wint
– Wint, Commented Jul 20, 2016 at 10:04

Dmitriy Nevzorov · Accepted Answer · 2016-07-20 11:53:17Z

6

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

edited Jul 20, 2016 at 11:53

answered Jul 20, 2016 at 11:47

Dmitriy Nevzorov

6,0881 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Ateek Over a year ago

Thank You very much. i was unable to understand this line of code. <form onSubmit={handleSubmit(this.submit)}> Now its working

Danys Chalifour Over a year ago

I'm doing exactly this, but it seem that I don't get the values typed in the form. Redux form seem to check the data in the state, how would I update the state on the form value change?

Collectives™ on Stack Overflow

How to handle redux form submitted data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related