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

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（子组件），用于可重复使用的（提交如果我们有另一个页面，使用该再次形成，我们必须处理提交每次？）

我试图处理提交形式的方式，但它不是成功。

任何想法？

非常感谢！

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