No.6 事件处理
事件处理
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:
- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
例如,传统的 HTML:
<button onclick="activateLasers()">Activate Lasers
</button>
在 React 中略微不同:
<button onClick={activateLasers}>Activate Lasers
</button>
在 React 中另一个不同点是你不能通过返回 false
的方式阻止默认行为。你必须显式的使用 preventDefault
。例如,传统的 HTML 中阻止链接默认打开一个新页面,你可以这样写:
<a href="#" onclick="console.log('The link was clicked.'); return false">Click me
</a>
在 React 中,可能是这样的:
function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked.');}return (<a href="#" onClick={handleClick}>Click me</a>);
}
在这里,e
是一个合成事件。React 根据 W3C 规范来定义这些合成事件,所以你不需要担心跨浏览器的兼容性问题。如果想了解更多,请查看 SyntheticEvent
参考指南。
使用 React 时,你一般不需要使用 addEventListener
为已创建的 DOM 元素添加监听器。React恰恰与之相反,你仅需要在该元素初始渲染的时候添加一个监听器。
当你使用 ES6 class 语法定义一个组件的时候,通常的做法是将事件处理函数声明为 class 中的方法。例如,下面的 Toggle
组件会渲染一个让用户切换开关状态的按钮:
class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 为了在回调中使用 `this`,这个绑定是必不可少的this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(state => ({isToggleOn: !state.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}
}ReactDOM.render(<Toggle />,document.getElementById('root')
);
在 CodePen 上尝试
你必须谨慎对待 JSX 回调函数中的 this
,在 JavaScript 中,class 的方法默认不会绑定 this
。如果你忘记绑定 this.handleClick
并把它传入了 onClick
,当你调用这个函数的时候 this
的值为 undefined
。
这并不是 React 特有的行为;这其实与 JavaScript 函数工作原理有关。通常情况下,如果你没有在方法后面添加 ()
,例如 onClick={this.handleClick}
,你应该为这个方法绑定 this
。
如果觉得使用 bind
很麻烦,这里有两种方式可以解决。如果你正在使用实验性的 public class fields 语法,你可以使用 class fileds 正确的绑定回调函数:
class LoggingButton extends React.Component {// 此语法确保 `handleClick` 内的 `this` 已被绑定。// 注意: 这是 *实验性* 语法。handleClick = () => {console.log('this is:', this);}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}
Create React App 默认启用此语法。
如果你没有使用 class fileds 语法,你可以在回调中使用箭头函数:
class LoggingButton extends React.Component {handleClick() {console.log('this is:', this);}render() {// 此语法确保 `handleClick` 内的 `this` 已被绑定。return (<button onClick={(e) => this.handleClick(e)}>Click me</button>);}
}
此语法问题在于每次渲染 LoggingButton
时都会创建不同的回调函数。在大多数情况下,这没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fileds 语法来避免这类性能问题。
向事件处理程序传递参数
在循环中,通常我们会为事件处理函数传递额外的参数。例如,若 id
是你要删除那一行的 ID,以下两种方式都可以向事件处理函数传递参数:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述两种方式是等价的,分别通过箭头函数和 Function.prototype.bind
来实现。
在这两种情况下,React 的事件对象 e
会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind
的方式,事件对象以及更多的参数将会被隐式的进行传递。
No.6 事件处理相关推荐
- java事件处理模型_从零开始理解JAVA事件处理机制(3)
我们连续写了两小节的教师-学生的例子,必然觉得无聊死了,这样的例子我们就是玩上100遍,还是不知道该怎么写真实的代码.那从本节开始,我们开始往真实代码上面去靠拢. 事件最容易理解的例子是鼠标事件:我们 ...
- Python Qt GUI设计:QTimer计时器类、QThread多线程类和事件处理类(基础篇—8)
目录 1.QTimer计时器类 2.QThread多线程类 3.事件处理类 一般情况下,应用程序都是单线程运行的,但是对于GUI程序来说,单线程有时候满足不了需求.例如,如果需要执行一个特别耗时的操作 ...
- delphi自定义事件处理
http://www.cnblogs.com/ywangzi/archive/2012/09/06/2673414.html delphi自定义事件处理 为什么我们点击按钮,就会执行按钮的onclic ...
- DataGrid鼠标事件处理
http://blog.csdn.net/bgu/ 完成功能是DataGrid的页面选中事件.鼠标事件.双击事件改变TR的色彩.代码很简单,只是一点JS操作. JS文件:GridControl.js ...
- Qt 事件处理和事件过滤器的返回值总结
事件处理: 1.返回 true:告诉Qt已经处理的这个事件 2.返回 false:Qt会把这个事件传递给它的父窗口部件来处理 3.返回 基类的event(QEvent*):Qt把这个事件交个它的基类来 ...
- Nagios之事件处理
目标:实现在监控3306端口服务时,出现1次critical软状态时或者在上一次执行后没有成功后出现的第一次硬状态critical情况下,远程执行mysql重启服务,并且每次执行远程重启服务前把报告事 ...
- iOS事件处理,看我就够了~
该文章属于<简书 - 刘小壮>原创,转载请注明: <简书 - 刘小壮> https://www.jianshu.com/p/b0884faae603 好久没写博客了,前后算起来 ...
- 【原】iOS学习之事件处理的原理
在iOS学习23之事件处理中,小编详细的介绍了事件处理,在这里小编叙述一下它的相关原理 1.UITouch对象 在触摸事件的处理方法中都会有一个存放着UITouch对象的集合,这个参数有什么用呢? ( ...
- jQuery学习---------认识事件处理
3种事件模型: 原始事件模型 DOM事件模型 IE事件模型 原始事件模型(0级事件模型) 1.事件处理程序被定义为函数实例,然后绑定到DOM元素事件对象上,实现事件的注册. 例子:var btn = ...
- jQuery事件处理一瞥
以前部门一直都是使用一个名为QTT的JS框架.最近老大提出要转用jQuery框架,需要将旧框架的一些JQ没有实现的功能移植到JQ中去.当我移植到event库的时候,以下是其代码: QTT.event ...
最新文章
- 拨开云雾见天日:剖析单机事务原理
- pandas使用fillna函数将dataframe中的缺失值按照列均值进行填充(fill missing values with the mean of the column)
- IDEA无法在service层用注解方式注入mapper
- vue 强制刷新组件
- c++ getline 读不到东西_C++ getline()函数问题
- 批量下载ABAP程序和表结构
- 曾几何时,我们炼的不是丹,是特征
- CF1009F-Dominant Indices【长链剖分】
- Laravel核心解读--HTTP内核
- RS-232 vs. TTL Serial Communication(转载)
- 【计算机视觉】基于Shading Model(对光照变化一定不变性)的运动目标检测算法...
- html开发列表搜索,前端实例练习 - 可搜索列表
- 手把手教你升级到MySQL 8.0
- 大一线性代数知识点总结
- 1.Linux系统编程入门
- 古城钟楼的微博报时是如何实现的?[科普贴]
- [原创] 仿滴滴出行打车APP定位导航,增加RFID认证、海外版、司机证件号码识别功能
- uni-app - 苹果安卓系统监听物理返回按键(手机左滑返回监听)
- CSP-J/S初赛考点总结
- NEW LOOK:利用SCRM营销体系线上线下消费结合,引爆O2O营销
热门文章
- 《基于混合方法的自然语言处理》译者序
- mysqlamanda备份
- 【Android】jar包和AAR包
- linux下perror函数,Linux/Unix C编程之的perror函数,strerror函数,errno
- mysqli 预处理
- css 边框太粗_CSS如何怎么设置div边框颜色宽度和高度
- 浅析RFID仓库管理系统的功能
- 用户管理(一):使用shell脚本批量添加指定数量的用户
- SECS/GEM:PLC与MES间解决方案
- Linux USB On-The-Go(OTG) on OMAP H2 软件架构分析(二)