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格式处理提交，但它没有成功。

有什么想法吗？

非常感谢你！

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表单提交？

1 个答案: