While clicking actions in antd table onRow click action is also initiated. How can i solve these problem

key = (selectedRowKeys) => {
console.log('selected values', selectedRowKeys);a
   }
action = () => {
console.log('received in actions')
}

Table code:

<Table
   onRowClick={this.key}
   loading={this.state.loading}
   dataSource={data}
   bordered="true"
>
<Column
 title="ID"
 dataIndex="id"
 key="id"
 width="100"
 zIndex="-1"
/>
<Column
 title="Action"
 key="action"
 width="200"
 render={(text, record) => (
   <span style={{ zIndex: '-1' }}>

     <a href="javascript:;" onClickCapture={this.action}>ACTION</a>
   </span>
 )}
/>
</Table>

while clicking the actions in the table the onclick function is also initiated, how to solve this im new to reactjs

While clicking actions in antd table onRow click action is also initiated. How can i solve these problem

key = (selectedRowKeys) => {
console.log('selected values', selectedRowKeys);a
   }
action = () => {
console.log('received in actions')
}

Table code:

<Table
   onRowClick={this.key}
   loading={this.state.loading}
   dataSource={data}
   bordered="true"
>
<Column
 title="ID"
 dataIndex="id"
 key="id"
 width="100"
 zIndex="-1"
/>
<Column
 title="Action"
 key="action"
 width="200"
 render={(text, record) => (
   <span style={{ zIndex: '-1' }}>

     <a href="javascript:;" onClickCapture={this.action}>ACTION</a>
   </span>
 )}
/>
</Table>

while clicking the actions in the table the onclick function is also initiated, how to solve this im new to reactjs

• javascript
• node.js
• reactjs
• antd
• feathersjs

Share Improve this question Follow edited Aug 21, 2019 at 11:23 Andronicus 26.1k1818 gold badges5454 silver badges9191 bronze badges asked Aug 21, 2019 at 7:50 Theresa joyTheresa joy 3711 silver badge33 bronze badges 1

• 2 Try using e.stopPropogation(). It really depends on which event gets called first. Another issue is that you are using a link, rather than a button. Consider using antd's <Button type="link"> – Kobe Commented Aug 21, 2019 at 7:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is a classic case of event bubbling.

Try stopping the event propagation in the following way:

action = (event) => {
  event.stopPropagation();
  console.log('received in actions');
}

This should capture the event and stop it from propagating to the parent event handler.

 <Table 
      loading={this.state.loading}
      dataSource={data}
      bordered="true"
      onRow={(r) => ({
         onClick: () => console.log(r.key),
      })}
 />