Реагирование: несколько модальных и проходящих реквизитов динамически

Question

У меня есть список предметов (ProjectActivityList), для каждого элемента есть кнопка «Редактировать». При нажатии на него открывается модальное редактирование элемента. Модаль принимает идентификатор.

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)?

Answer 1

Вы хотите передать его в качестве опоры и установить состояние текущего элемента. Установив состояние, будет выполнен повторный рендеринг (если это необходимо, и в этом случае), и поэтому Modal получит новый идентификатор.

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