Fourmi Design - empêcher la ligne de tableau de cliquer dans une colonne/zone spécifique

Question

J'utilise un composant de table de conception de fourmi. J'ai une colonne "actions" que je ne veux pas que l'événement onRowClick déclenche dans cette colonne.

Comment cela peut-il être fait?

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); 

Comme vous pouvez essayer lorsque vous appuyez sur la ligne modal info ouvrirait. En appuyant sur une action l'information et les modals de confirmation s'ouvriraient, et je voudrais que seulement confirme que modal ouvrirait.

Merci (:

Answer 1

arrêter la propagation juste dans votre gestionnaire d'action:

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