Reactjs Mehrfachformular senden

Question

In meinem Fall möchte ich mehrere Formulare in reactjs einreichen. Aber ich habe keine Ahnung, wie man das Multiple Formular bei Parent Component erhält und einreicht.

hier ist mein Code:

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

Hier nächste Klasse ist

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

In Ihrer Schleifenform Liste des Rendering, unterschiedlichen Sollwert für jedes Formular verwenden:

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

Nachdem alle Formulare gerendert wurden, greifen Sie auf die Formularliste über Refs in Ihrer übergeordneten Komponente zu, was bedeutet, dass Siehinzufügen müssenFunktion wie folgt:

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

} 

Ich hatte keine Zeit den gesamten Code für die Prüfung, aber das ist die Idee! Wenn es noch nicht funktioniert, fühlen Sie sich frei, hier einige Fehlerprotokolle zu veröffentlichen, dann können wir es zusammen lösen, danke ^^