React：複数のモーダルとパススルーを動的に

Question

私はアイテムのリストを持っています（ProjectActivityList）、各アイテムには編集ボタンがあります。それをクリックするとモーダルが開き、アイテムを編集できます。このモーダルはIDを受け取ります。

var ProjectActivities = React.createClass({ 

    onEditItem: function(id){ 
     // I want to pass the ID to modal and open it 
    }, 

    render: function(){ 
     return (
      <div> 
       <ProjectActivityList items={this.state.activities} onEdit={this.onEditItem}/> 
       <Modal /> 
      </div> 
     )  
    }  
}); 

どのように私は（onEditItemに）それにIDを渡しモーダルを開くことができますか？

Answer 1

あなたはそれを支柱として渡して、現在の要素の状態を設定したいとします。状態を設定することによって、再レンダリングが実行され（必要に応じて、この場合はそれが行われます）、Modalは新しいIDを受け取ります。

var ProjectActivities = React.createClass({ 

    onEditItem: function(id){ 
     // I want to pass the ID to modal and open it 
     this.setState({editingId: id}); 
    }, 

    render: function(){ 
     return (
      <div> 
       <ProjectActivityList items={this.state.activities} onEdit={this.onEditItem}/> 
       <Modal id={this.state.editingId} /> 
      </div> 
     )  
    }  
});