我遇到了一个问题,我有多个进度条,并且创建了 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>
)
)
最佳答案
问题是您通过单个状态变量控制所有进度,而不是使用单个状态变量,而是使用数组,使用这些方法:
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});
},
关于javascript - onClick 激活所有其他 onClick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42563451/