javascript - 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: [] };
},

传递每个Item的索引:

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