在渲染时调用 onClick={alert('hi')} 背后的原因 [重复]答案

【问题标题】：The reason behind onClick={alert('hi')} being called at render [duplicate]在渲染时调用 onClick={alert('hi')} 背后的原因 [重复]
【发布时间】：2018-07-02 02:50:03
【问题描述】：

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

我想了解一下这背后的逻辑。我知道点击时需要获取对函数的引用才能按预期运行。

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

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

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

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

为什么 onClick 内部的语句在渲染时被评估？

编辑：我正在使用 React。

【问题讨论】：

您使用的是模板框架吗？ {} 是干什么用的？
是的，可能是一个在解析时评估 {} 之间内容的框架。只需使用纯 JavaScript onclick="alert('hi')"，问题就会消失。但是，如果您真的在问“如何防止我正在使用的任何框架在使用 {} 时在解析时显示警报”，那么也许您应该改写这个问题。
这是您的回复。编辑了问题。我正在使用 React。

标签： javascript html reactjs alert

【解决方案1】：

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

function getString(){

   return "string";
}

然后定义一个文本框：

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

您会期望文本框会以“string”而不是“getString()”的值呈现。这是因为花括号内的内容是在 render 方法中计算的。

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

【讨论】：

【解决方案2】：

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

所以在渲染的时候，javascript会执行这个函数：alert('hi')

通过使用这种语法：

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

我们在点击时传递函数引用。该函数的内部块只有在该事件被调用时才会执行。

【讨论】：