在事件处理程序中响应curry箭头函数

Question

react如何知道在下面的代码中提供事件作为第二个参数?

const clickMe = (parameter) => (event) => {
event.preventDefault();
// Do something
}

<button onClick={clickMe(someParameter)} />

是否生成如下:

<button onClick={(event) => clickMe(someParameter)(event)} />

或者它是如何工作的?谢谢。

Answer 1

也许这将有助于更好地解释它。

闭包是在返回时携带本地环境信息(变量等)的函数。

我将在这个例子中不使用箭头函数，因为它们可能有点欺骗性。

// `multplyBy` accepts a number as its argument
// It returns a new function that "remembers" that number
// when it's returned. But that new function *also*
// accepts a number
function multiplyBy(n) {
return function(n2) {
return n2 * n;
}
}
// So `multiplyBy(5)` returns a new function
// which we assign to the variable `five`
const five = multiplyBy(5);
// And when we call `five` with a number we get
// the result of calling 5 * 10.
console.log(five(10));

如果将multiplyBy(n)替换为clickMe(n)，您将看到您将获得一个由单击侦听器使用的新函数，该函数的第一个参数将始终是事件。

Answer 2

Clickme变量在你的代码是一个函数，有返回是函数e =>{…}。当你像这样指定时:

<button onClick={clickMe(someParameter)} />

等于

<button onClick={e => {...} />

是react

中事件处理程序的基本形式