ボタンに動的フォームを追加するにはどうすれば反応するのですか？

Question

私はボタンをクリックするたびにフォームを追加する必要がある反応アプリを作っています。現在、私はカウンターを増やし、カウンターに数字をもとにフォームを表示しています。しかし、私はすべてのフォームを提出し、単一のボタンをクリックしてデータを取得する必要がありますが、私は各フォームとその特定のフォームのデータを提出している得られました。

これは私がフォームを表示しています方法です：

var HocAddForm = function(AbstractComponent,title){ 
return class extends React.Component { 
constructor(props){ 
    super(props); 
    this.state={ 
    anotherForm:1 
    } 
    this.newForm=this.newForm.bind(this); 
} 
newForm(){ 
    this.setState({ 
    anotherForm:this.state.anotherForm+1 
    }) 
} 
displayForm(){ 
    let forms = []; 
    for(let i = 0; i < this.state.anotherForm; i++){ 
    forms.push(
    <div key={i}> 
     <AbstractComponent/> 
    </div> 
    ) 
    } 
    console.log(this.state.value); 
    return forms || null; 
} 

render() { 
    const anotherForm=this.state.anotherForm; 
    const heading=title; 
    return(
    <div> 
     <button id="add-button" onClick={this.newForm}>AddForm</button> 
     <h3 className="form-place">{heading}</h3> 
     {this.displayForm()} 
    </div> 
) 
} 
} 
} 

マイAbstractComponentは次のとおりです。

class Experiance extends Component { 
    render() { 
     return (
      <Form onSubmit={this.props.onSubmit}> 
       <fieldset disabled={this.props.disabled}> 
        <Input 
         type="text" 
         name="companyName" 
         title="Company Name" 
         value="" 
        /> 
        <Input 
         type="number" 
         name="experiance" 
         title="No.of Years Worked" 
         value="" 
        /> 
       </fieldset> 
       <button id="button-right"> 
        {this.props.buttonName} 
       </button> 
      </Form> 
     ); 
    } 
} 

Answer 1

私はをクリックの上、ノードの配列としてフォームを維持し、この場合には状態となるだろう配列に新しいコンポーネントを追加して、配列の単純なマップにレンダリングする

擬似コード：

state = { 
forms: [] 
} 

onClickMethod() => { 
this.setState(state=> state.forms.push(<Experience />)) 
} 

render() { 
return (
    ... 
    <form className="forms" onSubmit={this.onSubmit}> //your container 
    this.state.forms.map(item => <item />) 
    </form> 
) 
}