2017-03-23 15 views
1

私はantデザインテーブルコンポーネントを使用しています。 onRowClickイベントがこの列でトリガーされることを望まない「アクション」列があります。Ant Design - 特定の列/領域のテーブル行のクリックを防止する

どうすればできますか?

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

情報モーダルを開くだろう行を押したとき、あなたが試すことができたよう

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

。 何らかのアクションを押すと、 の確認モーダルが開きます。 はモーダルを確認するとと表示されます。

おかげで(:

答えて

2

ちょうどあなたのアクションハンドラに伝播を停止します。

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

+0

おかげで(:仕事の例では[こちら]見つけることができます(http://codepen.io/liron_e/pen/VpVdyR?editors = 001)が必要です。 –

関連する問題