Reactjs多個表單提交

Question

在我的情況下，我想在reactjs中提交多個表單。但我不知道如何在父組件獲取多個表單並提交。

這裏是我的代碼：

class BulkEditor extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      items: [], 
      customCompanies: [] 
     }; 

     this.forms = []; 

     this.onAddChild = this.onAddChild.bind(this); 
     this.handleBulkSaveClick = this.handleBulkSaveClick.bind(this); 
    } 

    handleBulkSaveClick(event) { 
     event.preventDefault(); 
    } 

    /* 
    * -- Add Children 
    */ 
    onAddChild() { 
     this.state.items.push(BulkEditorForm.defaultProps); 

     this.setState({ 
      items: this.state.items 
     }); 
    } 

    render() { 
     var forms = this.state.items.map(function(item, index) {      
      return (
        <li className="list-group-item" key={index}>      
         <BulkEditorForm companies={this.state.customCompanies} item={item} 
          ref="editorform"></BulkEditorForm> 
        </li> 
      ); 
     }.bind(this)); 

     return (
       <ul className="list-group"> 
        {forms} 
        <li className="list-group-item"> 
         <div className="btn-group btn-group-sm pull-right" role="group" aria-label="bulk-buttons"> 
          <a href="javascript:;" className="btn btn-primary" onClick={this.onAddChild.bind(this)}> 
           <span className="glyphicon glyphicon-plus"></span> 
          </a> 
          <a href="javascript:;" className="btn btn-default" onClick={this.handleBulkSaveClick}>Bulk Save</a> 
         </div> 
         <div className="clearfix"></div> 
        </li> 
       </ul> 
     ); 
    } 
} 

這裏是隔壁班

export default class BulkEditorForm extends React.Component { 
    constructor(props) { 
     super(props); 

     this.handleFormSubmit = this.handleFormSubmit.bind(this); 
    } 

    handleFormSubmit(event) { 
     event.preventDefault(); 

     alert("Submit"); 
    } 

    render() {  
     return (
      <form action='#' method="post" onSubmit={this.handleFormSubmit}>     
       <button type="submit" className="btn btn-link">Save</button> 
      </form> 
     ); 
    } 
} 

Answer 1

在您的渲染樣式列表循環，使用不同的參考值，每種形式：

<BulkEditorForm companies={this.state.customCompanies} item={item} 
          ref={"editorform"+index}></BulkEditorForm> 

然後在呈現所有表單後，通過父組件中的引用來訪問表單列表，這意味着將添加componentDidMount()功能如下：

class BulkEditor extends React.Component { 
    constructor(props) { 
    } 

    componentDidMount() { 
    //using basic javascript "FOR" loop ^^ 
    for (i = 0; i < this.state.items.length; i++) { 
     this.forms.push(this.refs["editorform"+index]); 
    } 
    } 

} 

我沒有時間測試所有的代碼，但是這是想法！如果還不行，請隨時在這裏發佈一些錯誤日誌，然後我們可以一起解決，謝謝^^