How to handleSubmit with a redux-form

问题:

Hello I'm working to use redux-form for the first time. I am able to render the form but I have not been able to handle the submit. While I eventually want to send the data to the server, at this point, I'm simply trying to console log the form field values. I'm getting the error:

Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Here's my Profile.jsx file

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

Any redux-form experts available to help guide me in the right direction to being able to handle the submitted values in a way where I can eventually send them to my API. Thanks

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

回答1:

Redux-Form decorates your component with handleSubmit prop. According to docs it's:

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 doesn't 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 don't confuse your handleSubmit method with prop passed from Redux-Form with the same name.