onClick激活其他所有onClick事件

Question

我遇到了一個問題，其中創建了onClick事件的多個進度欄，但是當我單擊進度欄時，每個其他進度欄的onClick事件都被激活。

我有一個for循環，推動多個<td>與進度條在它被渲染。

我想實現的是，當用戶點擊每個進度條時，不同的細節出現在模態上，具體取決於他們點擊哪個進度條。

我正在使用react-overlays模態。

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

謝謝你的幫助！

代碼：

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

問題是你是一個單一的狀態變量控制所有的進步，而不是使用一個單一的狀態變量，使用數組，使用下列方法：

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

通過每個項目的索引：

onClick = {this.open(index)} 

onHide = {this.close(index)} 

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

使用該索引更新特定項目：

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