Wert an ein Modal in Jsx-Karte übergeben

Question

Ich habe eine Karte, die nur wenige Elemente wiedergeben. Wie kann ich Parameter wie Name des Elements, ID des Elements usw. an die modale Komponente übergeben?

render(){ 
    return(
     <div> 

      <Modal 
       isOpen={this.state.OpenDeleteModal} 
       confirmationTitle={`Delete item`} 
       confirmationCancel={'No'} 
       confirmationSuccess={'Yes'} 
       closeModal={this.closeModal} 
       successModal={this.successModal} 
      > 
       <p className="center">Are you sure you want to delete this item?</p> 
      </Modal> 

      <div className="wrapper"> 
       {map(items, obj => 
        <div key={obj._id} className="panel-body"> 
         <div className="row"> 
          <h2 className="title">{obj.name}</h2> 
          <a onClick={()=> this.setState({OpenDeleteModal:true})}>Delete</a> 
         </div> 
        </div> 
       )} 
      </div> 
     </div> 
    ) 
} 

Ich kann nur setzen denkt das obj._id im Tag als benutzerdefiniertes Attribut und wenn Benutzer klicken Sie auf löschen sie den Zustand des selectedItem ändern, ist es durch Requisiten passieren.

Answer 1

Eine einfache Lösung ist, sich daran zu erinnern, für welches Element Sie das Modal geöffnet haben. Etwas wie unten. Stellen Sie selected item ein, wenn Sie das Modal öffnen. Beim Löschen holen Sie es aus dem Status und löschen Sie es.

render(){ 
    return(
    <div> 

     <Modal 
      isOpen={this.state.OpenDeleteModal} 
      confirmationTitle={`Delete item`} 
      confirmationCancel={'No'} 
      confirmationSuccess={'Yes'} 
      closeModal={this.closeModal} 
      successModal={this.successModal} 
     > 
      <p className="center">Are you sure you want to delete this item?</p> 
     </Modal> 

     <div className="wrapper"> 
      {map(items, obj => 
       <div key={obj._id} className="panel-body"> 
        <div className="row"> 
         <h2 className="title">{obj.name}</h2> 
         <a onClick={()=> this.setState({OpenDeleteModal:true, selectedItem: obj._id})}>Delete</a> 
        </div> 
       </div> 
      )} 
     </div> 
    </div> 
) 
} 

UPDATE: Stellen Sie sicher, dass die selectedItem löschen, nachdem Sie die modale schließen.

Answer 2

A modal den Zustand der Komponente reagieren zugreifen können, können Sie die Informationen des ausgewählten Link in Zustand speichern

storeInformation(item) { 
    this.setState({OpenDeleteModal:true, 
          selectedId: item.id 
          selectedName: item.name 

          }) 
} 
render(){ 
    return(
     <div> 

      <Modal 
       isOpen={this.state.OpenDeleteModal} 
       confirmationTitle={`Delete item`} 
       confirmationCancel={'No'} 
       confirmationSuccess={'Yes'} 
       closeModal={this.closeModal} 
       successModal={this.successModal} 
      > 
       <p className="center">Are you sure you want to delete this item?</p> 
       <div>Name is: {this.state.selecteName}</div> 
      </Modal> 

      <div className="wrapper"> 
       {map(items, obj => 
        <div key={obj._id} className="panel-body"> 
         <div className="row"> 
          <h2 className="title">{obj.name}</h2> 
          <a onClick={()=> this.storeInformation(obj)}>Delete</a> 
         </div> 
        </div> 
       )} 
      </div> 
     </div> 
    ) 
}