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

Theo · Accepted Answer · 2016-03-04 04:57:00Z

1

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.

edited Mar 4, 2016 at 4:57

answered Mar 4, 2016 at 4:23

Theo

1,20310 silver badges14 bronze badges

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

1 Comment

Daniel B. Over a year ago

If you pass the function this way, redux-form is out of the loop, the state won't be kept up to date, etc.

Glorfindel · Accepted Answer · 2022-01-04 09:00:56Z

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.

Collectives™ on Stack Overflow

Controlling submit with data for redux-form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related