Ant Design - 防止 table 行点击特定 column/area

Question

我正在使用 ant design table 组件。我有 "actions" 列，我不希望在此列中触发 onRowClick 事件。

如何做到？

http://codepen.io/liron_e/pen/zZjVKZ?editors=001

const { Table, Modal } = antd;

const confirm = (id) => {
  Modal.confirm({
    title: 'Confirm',
    content: 'Bla bla ...',
    okText: 'OK',
    cancelText: 'Cancel',
  });
};

const info = (id) => {
  Modal.info({
    title: 'Info',
    content: 'Bla bla ...',
    okText: 'OK',
    cancelText: 'Cancel',
  });
};

const columns = [
  {
    key: 'status',
    title: 'text',
    dataIndex: 'text'
  }, {
    key: 'actions',
    title: 'actions',
    dataIndex: 'id',
    render: (id) => {
      return (
        <span>
          <a href="#" onClick={() => confirm(id)}>
            Clone
          </a>
          <span className="ant-divider" />
          <a href="#" onClick={() => confirm(id)}>
            Replace
          </a>
        </span>
      );
    }
  }
];

 const dataSource = [
   {
     id: '1',
     text: 'Hello'
   },{
     id: '123',
     text: 'adsaddas'
   },{
     id: '123344',
     text: 'cvbbcvb'
   },{
     id: '5665',
     text: 'aasddasd'
   },
 ];


ReactDOM.render(
  <div>
    <Table 
      columns={columns}
      onRowClick={() => this.info()}
      dataSource={dataSource}
    />
  </div>
, mountNode);

您可以尝试在按行时打开信息模式。当按下某些操作时，信息和确认模式将打开，我希望 仅确认模式将打开 .

谢谢 (:

Answer 1

只需在您的操作处理程序中停止传播：

<span> <a href="#" onClick={() => confirm(id)}> Clone </a> <span className="ant-divider" /> <a href="#" onClick={() => confirm(id)}> Replace </a> </span>

Answer 2

在你的渲染函数中：

render: (id) => {
  return (
    <span>
      <a href="#" onClick={(e) => { 
           e.stopPropagation();      
           confirm(id);
          }}>
        Clone
      </a>
      <span className="ant-divider" />
      <a href="#" onClick={() => confirm(id)}>
        Replace
      </a>
    </span>
  );
}

Answer 3

<Menu.Item onClick={(e)=>{ 
            e.domEvent.stopPropagation();
            handleUpdate(id)}}>
            Edit
 </Menu.Item>

Answer 4

使用 React Link 我们可以通过停止特定列上的事件传播和触发事件来获得默认的 anchor link 功能。

"react-router": "^5.2.0",
从“react-router-dom”导入{Link}；

  render: (value, record) => {

 // Conditional checks if needs to handle on particular set of column 

    return (
     <Link to={'TARGET_LINK_HERE'}
          target="_blank" rel="noopener noreferrer"
          onClick={(event) => {
            event.stopPropagation(); // prevent event to propogate to parent to have row click which is default functionality
         }}>{value}</Link>
    ) 
   }

Ant Design - 防止 table 行点击特定 column/area

Ant Design - prevent table row click in specific column/area

antd