react.js 中的 onChange答案

【问题标题】：onChange in react.jsreact.js 中的 onChange
【发布时间】：2021-11-28 22:06:50
【问题描述】：

我是 react.js 的新手。我对 react.js 中的 onChange 事件有点困惑。为什么我们在通过 onChange 事件处理事件时不使用括号？

<input 
  type="text"
  onChange={this.handleChange()}
/>

通常当我们通过 JavaScript 处理事件时，我们会这样写

<input type="text" onclick="handleChange()"/>

【问题讨论】：

看起来您缺少示例...

标签： javascript reactjs ecmascript-6

【解决方案1】：

如果你的意思是为什么我们需要做onChange={this.handleChange} 而不是onChange={this.handleChange()} - 第一个使得 reference 为 onChange 提供 handleChange。第二个立即（按照解释）运行 handleChange 函数，并将其 返回值 保存为 onChange 的参考。

这样想

onClick={alert(123)} // this runs alert immediately
onClick={() => alert(1)} // makes a new function will run when clicked
onClick={alert} // this runs alert when clicked

如果您在事件处理程序中需要 event 对象，请考虑从哪里获得它；您需要将其作为函数参数获取，为此您需要一个新函数或引用：

onClick={console.log} // logs the event object
onClick={(event) => console.log(event)} // also logs the event
onClick={console.log(event)} // runs immediately, event doesn't exist then

当您有像onclick="handleChange()" 这样的内联事件处理程序时，您的浏览器实际上会在您按下时评估字符串"handleChange()"。就像eval() 函数一样。尝试在开发工具中执行eval("alert()") 并注意“alert()”是一个字符串

PS。欢迎来到 SO！下次请检查您的问题的格式:)

【讨论】：