如何处理子组件中的 redux 表单提交？

Question

在我阅读的所有示例中，我们总是处理来自父组件的表单提交。

例如：

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

在子组件中

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

我认为我们应该在 ReduxForm（子组件）中处理提交以实现可重用（如果我们有另一个页面，再次使用该表单，我们每次都必须处理提交怎么办？）

我尝试用redux form方式处理提交，但是没有成功

有什么想法吗？

非常感谢！

Answer 1

您可以将提交回调委托给您选择的函数

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

如何处理子组件中的 redux 表单提交？

How can I handle redux form submission in child component?

reactjs

react-redux

react-redux-form