Redux-form: trigger onSubmit form after typing onChange

Question

I have a simple set of switches inside a reduction form. I need the onChange event of the radio button group to trigger the form's onSubmit event.

I am using reducex-form v5.3.1

Customization

RadioFormContainer.js

 class RadioFormContainer extends Component { render() { const {submit} = this.props; return ( <RadioForm submit={submit} /> ) } } const mapDispatchToProps = (dispatch) => { return { submit: function(values, dispatch) { // API call after validation } } }; 

Radioform.js

 class RadioForm extends Component { render() { const { submit, // custom post-validation handler // via redux form decorator: handleSubmit, submitting } = this.props; return ( <form onSubmit={handleSubmit(submit)}> <input {...radioField} checked={radioField.value == "one"} type="radio" value="one" disabled={submitting} /> <input {...radioField} checked={radioField.value == "two"} type="radio" value="two" disabled={submitting} /> </form> ); } } 

Attempted implementation not working

1. Call handleSubmit from componentWillReceiveProps on RadioForm

kyleboyle's suggestion here just doesn't work. When I call nextProps.handleSubmit from componentWillReceiveProps , I get this familiar error , Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

 componentWillReceiveProps(nextProps) { if (nextProps.dirty && nextProps.valid) { let doubleDirty = false; Object.keys(nextProps.fields).forEach(key => { if (nextProps.fields[key].value !== this.props.fields[key].value) { doubleDirty = true; } }); if (doubleDirty) { nextProps.handleSubmit(); } } } 

2. Call submit on RadioForm from the onChange handler

erikras offers it here. But this does not work for me, because it will skip the check.

 <input // ... onChange={(event) => { radioField.handleChange(event); // update redux state this.submit({ myField: event.target.value }); }} /> 

I think Bitaru ( same stream ) is trying to say the same thing in his answer, but I'm not sure. Calling onSubmit for me raises a Uncaught TypeError: _this2.props.onSubmit is not a function

3. Call submit on the form via this.refs

This causes the form to actually submit, completely skipping the reduction form

Per: How to call form submission to child component using Redux?

 <input // ... onChange={(event) => { radioField.onChange(event); this.refs.radioForm.submit(); }} /> 

Answer 1

You tried to add a hidden submit button

 <input ref="submit" type="submit" style="display: none;"/> 

and the onChange switch will call refs.submit.click ()?