添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

codepen

Steps to reproduce

My component which using Table component in 2.x versions, when I migrate to 3.x versions, console print out such error webpack-internal:///15:49 Warning: onRowClick is deprecated, please use onRow instead. , when I replace onRowClick with onRow event, my Component BREAK DOWN, as I use setState with onRowClick[onRow]

What is expected?

event should be triggered when I click table item

What is actually happening?

it triggered when each line rendered

when I look into source code in Table component,

ant-design/components/table/Table.tsx Line 218 1eff817

with onRowClick deprecated, how would I achieve a row-selection by clicking somewhere on the row?
Currently I'm doing it like this:

<Table onRowClick={cylinder => this.changeSelection()} />
          

@TimKraemer ,as @dengfuping said, the onRow event is to set props for each row, it means the work of onRow is changed, and you need to pass rowSelection[Object] props to deal with select events. You can checkout my modified codepen,OR check the document this part: https://ant.design/components/table/#rowSelection. Hope this helps. Also I think they should change the warning description as this props function totally changed, not instead.

yesmeck, aaronplanell, CecileChelim, jasveer1997, azizijunaid-zz, and vadimbakaev reacted with thumbs up emoji cgarciahdez, azizijunaid-zz, and peterkvac reacted with heart emoji JessyZeroual reacted with rocket emoji All reactions

Hello everybody,

First of all, thanks @dogbutcat for your full explanation. I agree with you: the warning description must be changed, because it seems that you must replace onRowClick by onRow and they don't do the same. In fact, as I am concerned, there is no similar functionality in v3.0... You cannot click to an entire row and give it the same callback, you must create a rowSelection and this means that a column with checkboxes will appear and you can click any checkbox, and it's not the same 😢

Any idea? Why deprecate onRowClick? 🤔

Thanks!

It works with:

onRow={(record) => ({
    onClick: () => { myCallBackThatReceivesTheID(record.key); }

Thanks a lot @yesmeck !!!

At this point, there is a click event in the row ,at the time, there is a button in the row, and there is also a lick event. When I click the button, the two events will be triggered. and in fact, I just want to trigger the event of the button, do not trigger event of the row. My idea is by judging the node properties,Is there any other way?

The following example shows how to use a v2 style onRowClick function with v3 style onRow

 <Table
        onRow={(record, index) => ({
          onClick: (event) => { onRowClick(record, index, event) } 
          

@mikaelascorn I'm doing it like this...

const onRow = (record: any, rowIndex: any) => {
	return {
		onClick: () => { setSelectedRow(rowIndex) }
const rowClassName = (record: any, index: number): string => {
	return index === selectedRow ? `${gStyles.active}` : ``;
<Table rowClassName={rowClassName} onRow={onRow} ......></Table>
          

If you still getting this issue : Warning: onRowClick is deprecated, please use onRow instead.
you can fixed this issue by trying this:

onRow={(record) => ({ onClick: () => { this.someClick(record.key) } })}

When I am clicking on Checkbox of any row of the table then onRow functionality of the table is being triggered at the same time because of event bubbling. I am not able to stop this because they are not giving event in rowSelection .

I'm having the same issue.

@stefatkins , @nischalhubbler Today I have confronted with this issue. I use the 3.26.16 version of the ant. To get rid of bubbling you must add onClick to the Checkbox component and call the stopPropagation method. I reproduced my fix using the codesanbox. Here is a link: https://codesandbox.io/s/bold-hodgkin-voiol?file=/src/App.js
I spent approximately one hour to fix this issue. I found out that the Checkbox component has the OnClick property after looking through allowed properties in the source of the component. You can ensure: https://github.com/ant-design/ant-design/blob/master/components/checkbox/Checkbox.tsx#L16