首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react.js中的onChange

react.js中的onChange
EN

Stack Overflow用户
提问于 2021-10-09 07:01:57
回答 1查看 51关注 0票数 0

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

代码语言:javascript
运行
复制
<input 
  type="text"
  onChange={this.handleChange()}
/>

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

代码语言:javascript
运行
复制
<input type="text" onclick="handleChange()"/>
EN

回答 1

Stack Overflow用户

发布于 2021-10-09 20:20:12

如果你的意思是为什么我们需要做onChange={this.handleChange}而不是onChange={this.handleChange()} -第一个makes给出了handleChange对onChange的引用。第二个函数(在被解释时)立即运行handleChange函数,并将该函数的返回值保存为onChange的引用。

你可以这样想

代码语言:javascript
运行
复制
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对象,请考虑从何处获得该对象;您需要将其作为函数参数获取,并为此需要一个新的函数或引用:

代码语言:javascript
运行
复制
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()") ()”是一个字符串

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69504471

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档