Controlling submit with data for redux-form

Question

I have a redux-form detailed below. According to the docs, I should be able to pass a function to handleSubmit and have it get called, but it does not seem to.

I'd like to preventDefault, then pass the form data to an action from another part of the site (have not implemented that below yet). However I cannot even seem to get a console log of 'FIRED' to log using this approach. What am I missing? And how can the data be obtained in this scenario? I'd normally bind to it in the function call, but I can't even get that to work...

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {reduxForm} from 'redux-form'
import FlatButton from 'material-ui/lib/flat-button'
import TextField from 'material-ui/lib/text-field'
import Checkbox from 'material-ui/lib/checkbox';
import orgValidation from './orgValidation'

@reduxForm({
  form: 'organization',
  fields: ['longName', 'acronym', 'ieee', 'active'],
  validate: orgValidation,
})
export default class OrganizationForm extends Component {
  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired
  };

  handleSubmit = (e) => { //***THIS NEVER GETS CALLED ***
    console.log('FIRED')
    console.log(e)
    console.log(this)
    e.preventDefault()

    console.log(data)
  };

  render() {
    let btnText
    if (this.props.params.orgId) {
      btnText = 'Update'
    }else{
      btnText = 'Create'
    }
    const {
      fields: {longName, acronym, ieee, active}, handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleSubmit)}>
        <center><h3 style={{fontSize: '24px', fontWeight: '400'}}>{btnText} Organization</h3></center>
        <div>
          <TextField
            floatingLabelText="Organization full name"
            type="text"
            fullWidth={true}
            autoFocus
            errorText={longName.error}
            {...longName}
          />
          <TextField
            floatingLabelText="Organization acronym"
            type="text"
            fullWidth={true}
            errorText={acronym.error}
            {...acronym}
          />
        <div className="row" style={{marginTop: '15px'}}>
          <div className="cute-6-tablet">
          <Checkbox
            label="IEEE Sponsored"
            labelStyle={{color: "gray"}}
            defaultChecked={true}
            checked={ieee.value}
            onCheck={(e, checked) => ieee.onChange(checked)}
          />
      </div>
      <div className="cute-6-tablet">
          <Checkbox
            label="Active"
            labelStyle={{color: "gray"}}
            defaultChecked={true}
            checked={active.value}
            onCheck={(e, checked) => active.onChange(checked)}
          />
      </div>
        </div>
        <div style={{float: 'right'}}>
          <FlatButton
            label="Cancel"
            secondary={true}
          />
          <FlatButton
            type="submit"
            label={btnText}
            primary={true}
          />
        </div>
        </div>
      </form>
    );
  }
}

Answer 1

By design, redux-form doesn't pass the event to your custom submit function.

From the submit validation example:

const submit = (values, dispatch) => {
  // This would normally be passed as a Component prop from the parent Container
}

class SubmitValidationForm extends Component {
  render() {
    const { fields: { username, password }, error, resetForm, handleSubmit, submitting } = this.props
    return (<form onSubmit={handleSubmit(submit)}> ... </form>);
  }
}

Instead, the custom submit function you pass to handleSubmit (inside the form's onSubmit handler) receives the new form values if they're valid.

More than likely, your validator isn't accepting the submitted values, and that's why your custom submit function isn't being called.

You should see in your console a @redux-form/SUBMIT_FAILED action, which you can inspect for validation info.

Answer 2

Try and write it like this:

<form onSubmit={this.handleSubmit}>

This is the proper way to pass a function reference to the onSubmit form prop. It should automatically bind to the fields and its values.

As a further note, as you are using redux-form everything will be kept in the global state. As your form is mounted at 'organization' you can mapStateToProps and have the form values in any other component.

function mapStateToProps(state) {
    return {
        organizationValues: state.form.organization
    }
}

This also implies that you have used connect.