Reagieren: mehrere modale und vorübergehende Requisiten dynamisch

Question

Ich habe eine Liste von Elementen (ProjectActivityList), für jeden Artikel gibt es die Schaltfläche Bearbeiten. Wenn Sie darauf klicken, wird Modal geöffnet, um das Element zu bearbeiten. Das Modal akzeptiert eine 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> 
     )  
    }  
}); 

Wie kann ich die modal öffnen, um den ID vorbei (in onEditItem)?

Answer 1

Sie möchten es als Prop zu übergeben und den Status des aktuellen Elements festlegen. Durch das Setzen des Status wird ein Re-Render durchgeführt (falls nötig, was es in diesem Fall ist) und so erhält das Modal die neue 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> 
     )  
    }  
});