小程序data-传递参数_ReactJS-参数化事件处理程序

小程序data-传递参数

by Sanket Meghani

通过Sanket Meghani

ReactJS-参数化事件处理程序 (ReactJS - Parameterized Event Handlers)

It is quite frequent requirement to pass parameters to event handlers of custom React components. There are several ways to achieve this with ES6 depending on whether we need reference to the event or not.

经常需要将参数传递给自定义React组件的事件处理程序。 根据我们是否需要引用事件，有几种使用ES6实现此目的的方法。

使用绑定功能 (Using the bind function)

We can define the event handler and bind it to this using JavaScript’s Function.prototype.bind() function.

我们可以定义事件处理程序，并使用JavaScript的Function.prototype.bind()函数将其绑定到this事件处理程序。

If we need to pass custom parameters, then we can simply pass the parameters to the bind call. The SyntheticEvent will be passed as second parameter to the handler.

如果需要传递自定义参数，则只需将参数传递给bind调用即可。 SyntheticEvent将作为第二个参数传递给处理程序。

A bind call function in a JSX prop like above will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary. It may also cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.

上面的JSX prop中的bind调用函数将在每个渲染器上创建一个全新的函数。 这对性能不利，因为这将导致以不必要的方式调用垃圾回收器。 如果将全新功能作为道具传递给使用该道具上的引用相等性检查来确定是否应更新的组件，则这也可能导致不必要的重新渲染。

To avoid creating a brand new function on every single render, we can bind the function in the constructor.

为了避免在每个渲染上创建全新的函数，我们可以在构造函数中绑定该函数。

Now, we need not to bind the function while specifying the event handler on line 13. However, the drawback here is that we cannot pass dynamic value for parameter.

现在，在第13行指定事件处理程序时，我们无需绑定函数。但是，这里的缺点是我们无法为参数传递动态值。

使用ES6箭头功能 (Using ES6 arrow function)

Calling bind every time is annoying. To avoid calling bind we can use ES6 arrow function which binds the function with this automatically.

每次都调用bind是很烦人的。 为了避免调用bind我们可以使用ES6箭头函数，该函数会自动与this绑定。

We can also pass additional parameters to event handlers.

我们还可以将其他参数传递给事件处理程序。

The problem with both above syntax is that a different callback instance is created each time the component is rendered, same as with the bind function.

上面两种语法的问题在于，每次渲染组件时都会创建一个不同的回调实例，这与bind函数相同。

To avoid creating a brand new callback instance on every render, we can use property initializer syntax to correctly bind callbacks.

为了避免在每个渲染器上创建一个全新的回调实例，我们可以使用属性初始化程序语法正确地绑定回调。

To pass parameters to event handlers while using property initializer syntax, we need to use currying.

要在使用属性初始化程序语法的同时将参数传递给事件处理程序，我们需要使用currying。

Please note that the currying results into a new instance being created for every invocation.

请注意，该currying结果导致为每个调用创建一个新实例。

结论 (Conclusion)

Provided all the different approaches above, using the arrow function with currying seems to be the cleanest & most concise (not most efficient though) way to define event handlers that accepts user defined parameters.

提供了以上所有不同的方法，使用带有currying的arrow函数似乎是定义接受用户定义参数的事件处理程序的最简洁，最简洁(虽然不是最有效)的方法。

I would love to hear your comments, suggestions or questions on above approaches.

我很想听听您对以上方法的意见，建议或问题。

翻译自: https://www.freecodecamp.org/news/reactjs-pass-parameters-to-event-handlers-ca1f5c422b9/

小程序data-传递参数