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
。 何らかのアクションを押すと、 との確認モーダルが開きます。 はモーダルを確認するとと表示されます。おかげで(:
おかげで(:仕事の例では[こちら]見つけることができます(http://codepen.io/liron_e/pen/VpVdyR?editors = 001)が必要です。 –