An example Analysis of the problem of onClick transfer parameters in React

This article is to share with you the content of an example analysis of the problem of passing parameters to onClick in React. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Background description

In a list such as the following figure, click the delete button to perform the delete operation

List generation:

{title: 'operation', dataIndex: 'rowguid', key:' rowguid', render: (text, record) = > (modify and delete)}

I need to add an event when I render the generate delete button, and I call it when I click, and I also pass a parameter, this parameter.

At first I wrote like this:

But the problem is that the delByGuid function is executed when the page is loaded, and the output of our console:

Not only that, but when I clicked the delete button, the function was not executed. It seems that this is not possible.

Question:

1. Execute when the page is rendered

two。 Click the button, onclick not executed

Solution: {title: 'operation', dataIndex: 'rowguid', key:' rowguid', render: (text Record) = > (modify delByGuid (text)} > delete)}

OnClick= {(e) = > delByGuid (text)}

This solves the problem, not when the page is loaded, and can be called when you click.

Thank you for reading! This is the end of the article on "sample Analysis of onClick transfer parameters in React". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!