传递事件处理程序作为参考

Question

这是来自 codecademy 的练习。 为什么需要将事件处理程序作为参考传递？ 为什么我不能输入onClick={goBack()}而不是onClick={goBack}

const goBack = () => {
    setQuestionIndex(prevQuestionIndex => prevQuestionIndex - 1);
  }

....

 <button onClick={goBack}>
          Go Back
 </button>

Answer 1

当您使用onClick={goBack()}您正在调用/调用函数goBack并将goBack调用的结果传递给onClick

现场演示

但是，如果您使用的是onClick={goBack} ，那么在这种情况下，您将传递对onClick的reference ，这意味着当用户click按钮时，它将自动调用该函数。 您不必自己调用该函数。

---

1）假设考虑具有价值的功能

<button onClick={fun()}> button with function reference</button>

如果您将值传递给函数，那么首先它会在控制台中产生一个warning ，如下所示：

Warning:
Expected `onClick` listener to be a function, instead got a value of `string` type.

当你调用它时，它会抛出error

Error
Expected `onClick` listener to be a function, instead got a value of `string` type.

2）如果您使用作为

<button onClick={fun}> button with function reference</button>

然后函数fun将作为prop传递，当使用单击该函数时，此函数fun将被自动调用

Answer 2

goBack是对函数的引用， goBack()调用该函数并返回结果。

对于按钮的单击处理程序，当然，您希望该函数在单击按钮时运行，而不是在呈现按钮时运行。 这就是为什么你需要传递函数，而不是调用它（在渲染时）并传递它的结果。

Answer 3

如果您传入函数调用而不是引用，它会在您的组件渲染后立即调用该函数，引用绑定到单击处理程序，因此当特定事件触发时，它将调用引用。

这是查看此内容的片段， Sandbox