reactjs – How to handleSubmit with a redux-form

reactjs – How to handleSubmit with a redux-form

Redux-Form decorates your component with handleSubmit prop. According to docs its:

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:

So if your component doesnt have onSubmit property you have to manually pass your submit handler to handleSubmit function. Please try this:

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

Please dont confuse your handleSubmit method with prop passed from Redux-Form with the same name.

(Posted solution on behalf of the question author to move it to the answer space).

Working code:

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));

reactjs – How to handleSubmit with a redux-form

Leave a Reply

Your email address will not be published.