React躬行记（6）——事件
React在原生事件的基础上，重新设计了一套跨浏览器的合成事件（SyntheticEvent），在事件传播、注册方式、事件对象等多个方面都做了特别的处理。
一、注册事件
合成事件采用声明式的注册方式，类似于设置HTML属性，但有两点不同：
（1）事件要采用小驼峰的命名法，而不是全部小写，例如onclick要写成onClick。
（2）在JSX中的事件处理程序是一个函数引用，而不是一段字符串，如下代码所示，其中handle()是一个函数。
<button onclick="handle()">提交</button>
<button onClick={handle}>提交</button>
两个<button>元素都注册了点击事件，其中前者采用了传统的事件注册，后者使用了合成事件，通过对比可发现它们之间有两处明显的不同。
React的事件类型是原生事件类型的一个子集，在上面的示例中，为按钮添加了Mouse类型的onClick事件。除了常规的Focus、Form、Touch等类型之外，React还支持Selection、Wheel、Media等有特殊功能的事件类型。
二、事件传播
React中的事件最终都会转换成原生事件，但不会注册到某个真实的DOM元素，而是绑定到根元素，使用事件委托技术进行事件代理，再由一个总的事件监听器管理所有的事件处理程序。
React中的事件传播只有冒泡这一种形式，而冒泡会先在DOM树中向上传播，一直到根元素，然后再从JSX中触发的React元素开始向它的父元素传播，依次执行绑定的事件处理程序。在下面的示例中，分别为页面中的根元素和<body>元素，以及组件中的<div>元素和<button>元素绑定了点击事件，其中<div>是<button>的父元素。
document.documentElement.addEventListener("click", function(e) {
console.log("html");
});
document.body.addEventListener("click", function(e) {
console.log("body");
});
class Btn extends React.Component {
handle1(e) {
console.log("子元素");
}
handle2(e) {
console.log("父元素");
}
render() {
return (
<div onClick={this.handle2}>
<button onClick={this.handle1}>提交</button>
</div>
);
}
}
当点击提交按钮时，在控制台输出的顺序是“body”、“html”、“子元素”、“父元素”。在React的合成事件中，也会包含一个事件对象（例如handle1()函数中的e参数）。如果要停止冒泡传播，那么可以在相应的事件处理程序中调用e.stopPropagation()。
三、事件对象
React基于W3C规范对事件对象进行了一层封装，不仅保证了浏览器的兼容性，还提供了一个访问原生事件对象的入口（即调用自身的nativeEvent属性）。注意，在合成事件中阻止元素的默认行为，不能用返回false的方式，得调用事件对象的preventDefault()方法。
合成事件是被池化的，在执行完事件处理程序后，其参数（即事件对象）的属性将会被丢弃，例如通过定时器异步调用事件对象的type属性，如下所示。
class Btn extends React.Component {
handle(e) {
console.log(e.type); //"click"
setTimeout(function() {
console.log(e.type); //null
}, 0);
}
render() {
return <button onClick={this.handle}>提交</button>;
}
}
点击提交按钮，在控制台首先会输出“click”，然后再输出null。如果想要保持事件对象的属性，那么可以调用它的persist()方法。继续上一个例子，只要在handle()方法中加一句e.persist()，如下代码所示，就能在定时器中输出“click”。
handle(e) {
console.log(e.type); //"click"
setTimeout(function() {
console.log(e.type); //"click"
}, 0);
e.persist();
}
四、this
事件处理程序中的this不会自动绑定，即默认是没有指向的。在下面的例子中，点击提交按钮，会先触发注册的handle()方法，然后在方法内输出的this的值是undefined。
class Btn extends React.Component {
handle() {
console.log(this); //undefined
}
render() {
return <button onClick={this.handle}>提交</button>;
}
}
有两种方式可以解决this指向的问题，分别是箭头函数和bind()方法。
1）箭头函数
将事件处理程序改成箭头函数的形式，就能纠正this的指向，如下代码所示。
class Btn extends React.Component {
handle() {
console.log(this); //Btn实例
}
render() {
return <button onClick={() => this.handle()}>提交</button>;
}
}
箭头函数是不包含this的，在其内部使用的this是从上一层的作用域中继承而来的，其指向的是函数声明时所在的对象，即当前组件的实例，注意，像上面的<button>元素那样，直接在其属性中使用箭头函数，会让组件在每次渲染时，创建一个不同的回调函数。
可以换一种写法，避免每次新建函数，如下代码所示，将箭头函数转移到方法声明的时候。
class Btn extends React.Component {
handle = () => {
console.log(this); //Btn实例
}
render() {
return <button onClick={this.handle}>提交</button>;
}
}
2）bind()
为事件处理程序调用bind()方法，同样也能纠正this的指向，如下代码所示。
class Btn extends React.Component {
handle() {
console.log(this); //Btn实例
}
render() {
return <button onClick={this.handle.bind(this)}>提交</button>;
}
}
函数的bind()方法能创建一个绑定指定对象的函数，在上面的render()方法中，传递给bind()方法的this，其指向的正是当前组件的实例。除了在元素的属性中调用bind()方法之外，还可以将其移到组件的构造函数中，如下所示。
class Btn extends React.Component {
constructor(props) {
super(props);
this.handle = this.handle.bind(this);
}
handle() {
console.log(this); //Btn实例
}
render() {
return <button onClick={this.handle}>提交</button>;
}
}
五、事件处理程序的参数
事件处理程序默认会接收一个事件对象，如果要向其传递额外的参数，那么可以通过两种方式实现。
第一种是用箭头函数，如下代码所示，显式地将所有参数传递给事件处理程序。
class Btn extends React.Component {
handle(e, name) {
console.log(e, name);
}
render() {
return <button onClick={(e) => this.handle(e, "strick")}>提交</button>;
}
}
第二种是用bind()方法，如下代码所示，事件对象会被隐式的传递过去，并且必须位于事件处理程序参数列表的最后。
class Btn extends React.Component {
handle(name, e) {
console.log(name, e);
}
render() {
return <button onClick={this.handle.bind(this, "strick")}>bind</button>;
}
}
React躬行记（6）——事件的更多相关文章
- React躬行记（5）——React和DOM
React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的rea ...
- React躬行记（7）——表单
表单元素是一类拥有内部状态的元素,这些状态由其自身维护,通过这类元素可让用户与Web应用进行交互.HTML中的表单元素(例如<input>.<select>和<radio ...
- React躬行记（8）——样式
由于React推崇组件模式,因此会要求HTML.CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离.React已将HTML用JSX封装,而对CSS只进 ...
- React躬行记（9）——组件通信
根据组件之间的嵌套关系(即层级关系)可分为4种通信方式:父子.兄弟.跨级和无级. 一.父子通信 在React中,数据是自顶向下单向流动的,而父组件通过props向子组件传递需要的信息是组件之间最常见的 ...
- React躬行记（3）——组件
组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用 ...
- React躬行记（10）——高阶组件
高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...
- React躬行记（11）——Redux基础
Redux是一个可预测的状态容器,不但融合了函数式编程思想,还严格遵循了单向数据流的理念.Redux继承了Flux的架构思想,并在此基础上进行了精简.优化和扩展,力求用最少的API完成最主要的功能,它 ...
- React躬行记（14）——测试框架
测试不仅可以发现和预防问题,还能降低风险.减少企业损失.在React中,涌现了多种测试框架,本节会对其中的Jest和Enzyme做详细的讲解. 一.Jest Jest是由Facebook开源的一个测试 ...
- React躬行记（15）——React Hooks
Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...
随机推荐
- JS数组操作：去重，交集，并集，差集
原文:JS数组操作:去重,交集,并集,差集 1. 数组去重 方法一: function unique(arr) { //定义常量 res,值为一个Map对象实例 const res = new Map ...
- 数学公式的规约（reduce）和简化（simplify）
to simplify notation, 1. 增广(augment) xi=[xi;1],减少一个常数项: 2. 多个求和号 ∥x∥2=xTx 向量 ⇒ 矩阵: 求和号本身也可化为向量矩阵运算: ...
- 讨论2-sat建设和解决问题
2-sat问题是一种常见的问题.给定若干个01变量,变量之间满足一些二元约束,求是否有解存在.若存在,给出可行解或依照字典序给出最优解. 以下给出与其相应的图论模型:给每一个变量i设立2个点,我的习惯 ...
- Binding的详细说明
<DataGridTextColumn Width="*" Header=" 组合规则名称 " Binding="{Binding ComRul ...
- glibc_error reporting
很多GNU C库里的函数都会侦测并报告错误条件.我们的程序需要检测这些错误条件.比如:我们打开一个输入文件时需要判断该文件是否正确的打开.如果没有正确打开,我们需要打印错误或者采取其他正确的方式.为了 ...
- C++的中英文字符串表示(string,wstring)，使用wcout.imbue(std::locale("chs"));本地化解析编码
在C++中字符串类的string的模板原型是basic_string template <class _Elem, class traits = char_traits<_Elem> ...
- Win8 Metro(C#)数字图像处理--3.5图像形心计算
原文:Win8 Metro(C#)数字图像处理--3.5图像形心计算 /// <summary> /// Get the center of the object in an image. ...
- 1. linux系统简介
一.Linux是什么 linux位于系统调用和内核的那两层,直观上来看,我们使用的操作系统还包含一些在其上运行的应用程序,包含文本编译器,浏览器,电子邮件. 二.Linux与windows的区别 1. ...
- TIFF图片简介
每个TIFF文件都是从指示字节顺序的两个字节开始的.“II”表示小字节在先.“MM”表示大字节在先字节顺序.后面的两个字节表示数字42.数字42是“为了其深刻的哲学意义"而选择的. 42的读 ...
- 【Windows10 IoT开发系列】PowerShell的相关配置
原文:[Windows10 IoT开发系列]PowerShell的相关配置 可使用 Windows PowerShell 远程配置和管理任何 Windows 10 IoT 核心版设备.PowerShe ...