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