3个标签页 <TabPane tab="MySql(2)" key="1"> <div className="">{this.buttonPPAS("MySql")}</div> </TabPane> buttonPPAS方法里return 标签 <Button // onClick={() => this.showModal(size)} // 弹出对话框 onClick={() => this.showDelModal(size)} style={{ marginTop: '3px' }} type="primary" > 添加数据资产11 {JSON.stringify(this.state.delModalVisible) + "--" + this.state.visible} </Button> 以及 Moal标签 第1个问题 onClick={this.showDelModal(size)} 这样写 每次刚进来页面 对话框就出来了 每次自动调用方法了 所以改成 onClick={() => this.showDelModal(size)} 多个箭头函数 第2个问题 因为render函数里是直接调用的buttonPPAS方法里的 标签 所以在showDelModal方法里的 this.setState({ delModalVisible }), () => { console.log('触发回调函数') } 不生效 需要加个 this.forceUpdate();
1.原因 页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题) 2.解决方案 不让多个Modal同时渲染就行了,设置Modal的visible属性为this.state.delModalVisible,this.state.delModalVisible的值为[], 如果是在table里可以这么做: showDelModal(id) { const delModalVisible = this.state.delModalVisible delModalVisible[id] = true this.setState({ delModalVisible }) } { this.state.delModalVisible[record.id] ? <Modal visible={this.state.delModalVisible[record.id]} > </Modal> : null } 这样就达到想让哪个弹窗出来就让哪个弹窗出来的效果了,颜色也不会加深,效率也提高了