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