react antd 调用Form的问题 和 Table表格点击事件与表格内详情点击事件冲突的问题

[药大不能停]

第一个问题：Form表单调用

A.js调用 B.js或 C.js 的内容, B：modal表单 C.js表格
点击，添加或详情 按钮，出现同一个modal，展现在右侧的div中，点击表格行，出现右侧最下面的表格
切换页面成功了，但是表格行的点击事件和详情的点击事件同时执行操作了，需要点详情两下，才能出现modal页面，原本想用onHeaderRow，用index控制最后一列的onclik禁用，但是不行~
详情页的传值也有问题，因为modal的form在B.js~事件控制的方法在A.js上，导致没办法传，用了判断，this.state设置属性，也不行，求大神指点~~~下面是图，然后是代码

this.state = {
      typeCode: 'table',
      record: '',
      validateFields:null,
      selectedUser: null,
      data: []}
handleChange(type, record) {
    const {data, selectedUser, typeCode} = this.state
    if (type === 'row') {//页面切换
      this.setState({typeCode: 'table'})
    }
    else {
      let {form} = this.props;
      let tempList = data
      form.validateFields((err, values) => {
        if (err) {  //输入框内容验证
          return;
        }
        let temp = {...selectedUser, ...values}
        if (selectedUser) {
          console.log(selectedUser, 'selectedUser')
          temp.map(item => {//修改
            if (item.key === temp.key) {
              item.name = temp.name
              item.ip = temp.ip
            }
          })
          this.setState({typeCode: 'list', data: temp})
        }
        else {//新建
          tempList = tempList.concat(temp)
          this.setState({typeCode: 'list',dataSource: tempList})
        }
        this.handleCancel();
      })
    }
<a   onClick={() => this.handleChange('edit', record)} >详情</a>
<Button onClick={() => this.handleChange('edit')}>添加</Button>
 {/*右侧栏*/}
        <div id={typeCode} >
          {typeCode === "table" ? <DataTable/> : void(0)}
          {typeCode === "list" ? <QueryDataBase record={record}/> : void(0)}

[前端_小菜鸟]

首先,你看看ui库你选择的模板是哪个模板,有没有不需要的事件,比如行事件等,这个你可以看看,ui库里面有个多选和单选的函数方法,当你点击 当前行的时候会将 这一行选择给状态改变, 点击按钮的时候也有操作事件,如果你两个方法都对这个操作状态有关的话,就会出现这个问题

[药大不能停]

引用 1 楼 前端_小菜鸟 的回复:

首先,你看看ui库你选择的模板是哪个模板,有没有不需要的事件,比如行事件等,这个你可以看看,ui库里面有个多选和单选的函数方法,当你点击 当前行的时候会将 这一行选择给状态改变, 点击按钮的时候也有操作事件,如果你两个方法都对这个操作状态有关的话,就会出现这个问题

没太明白你的意思，因为我本身是需要用到 行事件喝点击事件的，所以事件冲突的情况下需要解决~没想到啥好办法，多选时间onSelect我试了好像也不太行

[前端_小菜鸟]

检查一下,行事件,跟点击事件,是不是都会对状态进行改变,在这两个事件输出一下,就可以知道当你点击这个 是不是会改变某一个状态, const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; 这个onSelectChange事件相当于你点击行上面会触发的 其实不是点2下才可以触发, 你可以尝试 点一下当前行的某一个地方,然后再点击一下点击事件按钮, 这样去试试你就会发现问题了,输出来看看结果就明白了

[药大不能停]

引用 3 楼 前端_小菜鸟 的回复:

检查一下,行事件,跟点击事件,是不是都会对状态进行改变,在这两个事件输出一下,就可以知道当你点击这个 是不是会改变某一个状态, const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; 这个onSelectChange事件相当于你点击行上面会触发的 其实不是点2下才可以触发, 你可以尝试 点一下当前行的某一个地方,然后再点击一下点击事件按钮, 这样去试试你就会发现问题了,输出来看看结果就明白了

好的，我先试试，谢谢~~~

[药大不能停]

解决了，写了个阻止冒泡就行了