Question

我遇到了一个问题，我在创建onClick事件时有多个进度条，但是当我点击进度条时，其他每个进度条的onClick事件都被激活。

我有一个for循环，它会推送多个<td>并在其中显示一个进度条。

我想要实现的是当用户点击每个进度条时，Modal会根据他们点击的进度条显示不同的详细信息。

我正在使用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});
},

onClick激活所有其他onClick事件

1 个答案: