如何處理子組件中的重複表單提交？

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