react 使用antd 同1个页面 多次点击不同标签页的对话框 背景色逐渐加深 前提是对话框 一直使用的是1个对话框

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
}
这样就达到想让哪个弹窗出来就让哪个弹窗出来的效果了，颜色也不会加深，效率也提高了