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

Question

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

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

....

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

Answer 1

当您使用 onClick={goBack()} 时，您就是 invoking/calling 函数 goBack 并且 goBack 调用的结果传递给 onClick

现场演示

但是如果您使用 onClick={goBack}，那么在这种情况下，您将 reference 传递给 onClick，这意味着当用户 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 as

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

2) 如果您使用 as

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

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

Answer 2

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

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

Answer 3

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

这是一个片段，可以看到这个， Sandbox

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

passing event handler as reference

javascript

jsx

reactjs