antd 表操作和行函数

Question

在 antd 表中单击操作时，还会启动行单击操作。我该如何解决这些问题

key = (selectedRowKeys) => {
console.log('selected values', selectedRowKeys);a
}
action = () => {
console.log('received in actions')
}

表代码：

<Table
onRowClick={this.key}
loading={this.state.loading}
dataSource={data}
bordered="true"
>
<Column
title="ID"
dataIndex="id"
key="id"
width="100"
zIndex="-1"
/>
<Column
title="Action"
key="action"
width="200"
render={(text, record) => (
<span style={{ zIndex: '-1' }}>
<a href="javascript:;" onClickCapture={this.action}>ACTION</a>
</span>
)}
/>
</Table>

在单击表中的操作时，还会启动 OnClick 函数，如何解决此 IM 新到反应

Answer 1

这是事件冒泡的典型案例。

尝试通过以下方式停止事件传播：

action = (event) => {
event.stopPropagation();
console.log('received in actions');
}

这应该捕获事件并阻止它传播到父事件处理程序。

Answer 2

<Table 
loading={this.state.loading}
dataSource={data}
bordered="true"
onRow={(r) => ({
onClick: () => console.log(r.key),
})}
/>