我正在使用ant设计表组件。我有“操作”列,我不希望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);


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

谢谢 (:

最佳答案

只需在动作处理程序中停止传播即可:

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

10-01 18:20
查看更多