ボタンをクリックするたびに反応コンポーネントをレンダリングする方法は？

Question

私はすべてのボタンclick.But上のコンポーネントをレンダリングする反応のアプリケーションを作成するが、私は一度だけそれを行うことができます。

ここ

class AddForm extends React.Component{ 
constructor(props){ 
    super(props); 
    this.state={ 
    anotherForm:false, 
    } 
    this.newForm=this.newForm.bind(this); 
} 
newForm(){ 
    this.setState({ 
    anotherForm:true 
    }) 
} 
render(){ 
return(
    <div> 
    <button onClick={this.newForm}>AddForm</button> 
    <EducationDetails/> 
    {this.state.anotherForm?<EducationDetails/>:null} 
    </div> 
) 
} 
} 

コンポーネントEducationDetailsはAddFormボタンが、私はそれを把握することができませんでしたclicked.Butされるたびにレンダリングされます。ここで

Answer 1

は作業jsfiddle

これはあなたの教育詳細コンポーネントであると仮定しますです。あなたのAddFormコンポーネントで

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

     render() { 
     return (<div> 
      <p>FirstName: <input type="text" value={this.props.value || ''} /></p> 
       <p>LastName: <input type="text" value={this.props.value || ''} /></p> 
       </div> 
     ); 
     } 
    } 

、あなたは数といつでもあなたのカウント状態に基づいて、カウントして表示教育の詳細フォームをインクリメント以上の追加]ボタンをクリックしますを持つことができます。あなたはまた、

<input type='button' value='remove' onClick={this.removeClick.bind(this)}/>