Let's talk about the issue of passing parameters to React onClick

Background

In a list like the one below, clicking the Delete button requires the delete operation to be performed

List generation:

	{
		title: 'Operation',
		dataIndex: 'rowguid',
		key: 'rowguid',
	    render: (text, record) => (
		      <Space size="middle">
		        <Button type="primary" size="small" >Modify</Button>
		        <Button type="danger" size="small" >Delete</Button>
		      </Space>
			)
	}

I need to add an event when rendering and generating the delete button, and call it when it is clicked, and also pass parameters. This parameter

I started by writing:

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

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

question:

1. Executed when the page is rendered

2. Click the button, onclick is not executed

Solution:

	{
		title: 'Operation',
		dataIndex: 'rowguid',
		key: 'rowguid',
	    render: (text, record) => (
		      <Space size="middle">
		        <Button type="primary" size="small" >Modify</Button>
		        <Button type="danger" size="small" onClick={(e)=>delByGuid(text)}>Delete</Button>
		      </Space>
			)
	}

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

This solves the problem. It doesn't work when the page is loaded, but it can be called when it is clicked.

This is the end of this article about React onClick passing parameters. For more relevant React onClick passing parameters content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!