Antd（ant design）表格React组件中区分行点击

Question

我正在使用 Ant Design 表格组件： https: //ant.design/components/table/#Table

在每一行中，我都会呈现一个标题和一些链接。例如：

Product 1
https://example.com/link/product/1

我正在使用onRowAPI 打开一个模式来编辑该行的信息，效果很好。但是，onRow如果我单击链接，也会触发该事件。如果我仅单击行中的链接，是否有办法不触发onRow事件，并且如果单击行单元格上的任意位置，仍然保持一切正常？

注意：我当前的解决方法是使用isEditing状态标志，但这不是一个好的体验，因为我必须进入“编辑模式”并设置isEditing为 true。

Answer 1

你最好展示你的代码用法onRow和columns，如果你使用onRow.onClick如下：

<Table
  onRow={(record, rowIndex) => {
    return {
      onClick: event => {}, // click row
    };
  }}
/>

您可以使用Event.stopPropagation()自定义链接渲染，如下所示：

const columns = [
  {
    dataIndex: "link",
    title: "Link",
    render: (value) => {
      return (
        <a
          onClick={(event) => event.stopPropagation()}
          href={value}
          target="_blank"
        >
          Link
        </a>
      );
    }
  }
]