在渲染时调用onClick = {alert（＆＃39; hi＆＃39;）}的原因

Question

我知道这不是让按钮在点击时显示警告的正确方法。

我想说明这背后的逻辑。 据我所知，点击需要获取对函数的引用才能按预期运行。

在以下示例中，将引用箭头函数，该函数将在单击时调用：

<button onClick={() => alert('hi)}>Click me!</button>

但在这种情况下，幕后会发生什么：

<button onClick={alert('hi)}>Click me!</button>

为什么onClick中的语句在render？

进行评估

编辑：我正在使用React。

Answer 1

想象一下你有这样的方法：

function getString(){

   return "string";
}

然后定义一个文本框：

<input type="text" value={getString()}/>

您可能希望文本框的值为＆＃34; string＆＃34;不是＆＃34; getString（）＆＃34;。这是因为花括号内的内容在render方法中得到了评估。

当评估{alert('hi)}时，它会运行方法，因此分配给onclick事件的是alert('hi')（无）返回的内容，而不是方法本身。

Answer 2

在反应应用程序中，我们用javascript而不是HTML编写html。

因此，在渲染时，javascript将执行此功能：alert（＆＃39; hi＆＃39;）

使用以下语法：

 <button onClick={() => alert('hi')}>Click me!</button>

我们将函数引用传递给on click。只有在调用此事件时才会执行此函数的内部块。