react antd组件table onRow和onCell分别实现不同路径跳转

有一个antd组件的表格Table，可以给它设置行事件onRow：

<Table
    dataSource = {data}
    onRow = {(record) => {
        return {
            onClick:(event) => {
                console.log('onROW事件');
                history.push('路径1');
            }
        };
        }
    }
    columns = {[...]}
/>

那么点击表格行的时候就会触发对应行点击事件，如果此时想点击某行的某个单元格时触发其他事件怎么办呢？

这时候就需要认识新的事件了：onCell事件

antd中的Table组件提供了onCell属性来处理表格中的单元格事件。

onCell可以传入一个函数。函数会在单元格被点击时触发，例如：

在Table的某列中设置onCell事件： 

<Table
    dataSource = {data}
    onRow = {(record) => {
        return {
            onClick:(event) => {
                console.log('onROW事件');
                history.push('路径1');
            }
        };
        }
    }
    columns = {[
    ...,
    {
        title:'事件列',
        dataIndex:'name',
        className:'nameclass',
        onCell:(record) => {
            return {
                onClick: (event) => {
                    console.log('onCell事件');
                    history.push('路径2');
                }
            }
        }
    },
    ...,
    ]}
/>

此时在表格中点击该 事件列 会发生什么呢？会跳到路径1

是的，onCell事件被触发了，但是仔细看，onRow事件也被触发了，如果我们的两个事件都是history.push(路径) 这种跳转事件的话，事实证明最终会跳转到onRow事件设置的路径1去，那我们onCell事件设置的路径2不就没用了吗？

还记得事件冒泡吗？这就是发生了事件冒泡从而未达到预期，此时 只需要阻止事件冒泡就行了。

加入event.stopPropagation()：

<Table
    dataSource = {data}
    onRow = {(record) => {
        return {
            onClick:(event) => {
                console.log('onROW事件');
                history.push('路径1');
            }
        };
        }
    }
    columns = {[
    ...,
    {
        title:'事件列',
        dataIndex:'name',
        className:'nameclass',
        onCell:(record) => {
            return {
                onClick: (event) => {
                    console.log('onCell事件');
                    event.stopPropagation();//阻止事件冒泡到onRow
                    history.push('路径2');
                }
            }
        }
    },
    ...,
    ]}
/>

这时候就没问题了，点击事件列的时候会顺利跳转到路径2，点击其他列会顺利跳转到路径1。