react传递参数_如何在React中将参数传递给事件处理程序

react传递参数

When you work on a React functional component you might have the need to attach an event to onClick (or other events).

在使用React功能组件时，您可能需要将事件附加到onClick(或其他事件)。

You usually do:

您通常会这样做：

<button onClick={addBill}>Add</button>

But what if you have to pass a parameter? Say you have a list of bills, and you want to remove one by clicking the “X” next to it.

但是，如果必须传递参数怎么办？ 假设您有一个清单清单，并且想通过单击清单旁边的“ X”来删除清单。

You can’t do:

您不能：

<button onClick={removeBill(index)}>𝗫</button>

because the expression inside onClick is going to be executed on mount. This is going to delete all the bills in the list, as soon as the app is started.

因为onClick内部的表达式将在安装时执行。 该应用程序启动后，这将删除列表中的所有账单。

Instead, this is what you need to do, using arrow functions:

相反，这是您需要使用箭头功能执行的操作：

<button onClick={() => removeBill(index)}>𝗫</button>

翻译自: https://flaviocopes.com/react-pass-parameter-event/

react传递参数