onClick aktiviert alle anderen onClick-Ereignisse

Question

Ich habe ein Problem, wo ich mehrere Fortschrittsbalken mit onClick-Ereignis erstellt habe, aber wenn ich auf den Fortschrittsbalken klicke, wird das Ereignis onClick aller anderen Fortschrittsbalken aktiviert.

Ich habe eine for-Schleife, die mehrere <td> mit einem Fortschrittsbalken drängt, um gerendert zu werden.

Was ich erreichen möchte, ist, wenn der Benutzer auf jede Progress Bar klickt, verschiedene Details erscheinen auf dem Modal, je nachdem, auf welcher Progress Bar sie klicken.

Ich verwende react-overlays modal.

Picture of all the div showing up hidden after clicking on the Progress Bar

Vielen Dank für Ihre Hilfe!

Code:

getInitialState: function(){ 
    return { showModal: false }; 
}, 

close(){ 
    this.setState({ showModal: false }); 
}, 

open(){ 
    this.setState({ showModal: true }); 
}, 


for loop(
    bodyRows[cellIndex].push(
     <td id="tableBody"> 
     <div className="progress" role="progressbar" id="progressBarStyle" onClick={this.open}> 
      <Modal 
      aria-labelledby='modal-label' 
      style={modalStyle} 
      backdropStyle={backdropStyle} 
      show={this.state.showModal} 
      onHide={this.close} 
      keyboard={true} 
      > 
      <div style={dialogStyle()} > 
       Hello 
      </div> 
      </Modal> 
      <div className="progress-meter" data-values={this.calculatePercent(value)}> 
      {Math.floor(this.calculatePercent(value)) + '%'} 
      </div> 
     </div> 
     </td> 
) 
) 

Answer 1

Ausgabe ist, dass Sie von einem einzelnen Zustandsvariablen alle Fortschritte kontrollieren, anstatt eine einzelne Zustandsgröße verwendet wird, ein Array verwenden, Verwenden Sie diese Methoden:

getInitialState: function(){ 
    return { showModal: [] }; 
}, 

Übergeben Sie den Index jedes Artikels:

onClick = {this.open(index)} 

onHide = {this.close(index)} 

show = {this.state.showModal[index] || false} 

Verwenden Sie den Index, um bestimmte Artikel zu aktualisieren:

open(index){ 
    let showModal = this.state.showModal.slice(); 
    showModal[index] = true; 
    this.setState({ showModal}); 
}, 

close(index){ 
    let showModal = this.state.showModal.slice(); 
    showModal[index] = false; 
    this.setState({ showModal}); 
},