D Durham D Durham - 3 months ago 93
React JSX Question

Controlling submit with data for redux-form

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

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.