How can I handle redux form submission in child component? - reactjs

Question

In all examples that I read, we always handle submission of the form from parent component.
For instance:
export default class ParentComponent extends React.Component{
constructor(){
super();
this.state = {
working: false,
users: []
}
}
handleSubmit(values){
//do something
}
render(){
return(
<div className="container">
<ReduxForm onSubmit={this.handleSubmit.bind(this)} {...this.props}/>
</div>
);
}
}
and in child component
class ReduxForm extends React.Component{
constructor(){
super();
}
render(){
const {handleSubmit, pristine, reset, submitting } = this.props;
return(
<div>
<h2>Hello, Redux form</h2>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" className="form-control"/>
</div>
<div className="form-group">
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text" className="form-control"/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-success">Submit</button>
</div>
</form>
</div>
);
}
}
I think we should handle the submission in ReduxForm (child component) for reusable (what if we have another page, use that form again and we have to handle submission every time?)
I tried to handle the submission in redux form way, but it's not success.
Any idea?
Thank you so much!

Answer 1

You can delegate the submission callback to the function of your choice
class ReduxForm extends React.Component{
constructor(){
super();
this.submit = this.submit.bind(this);
}
submit(values) {
alert('SUBMIT : ' + JSON.stringify(values));
}
render(){
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.submit)}>
// ^^^^^^^^^^^
// Your submission handler
// ...
</form>
}
}