React中的事件模型
2018-06-23 本文已影响0人
追风的云月
React事件模型跟在原生DOM元素的事件模型非常相似。但是有一些语法上的区别：
- React 事件使用驼峰命名，而不是全部小写。
- 通过 JSX , 传递一个函数作为事件处理程序，而不是一个字符串。
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
- 在 React 中你不能通过返回 return false 来阻止默认行为。必须显式调用 preventDefault 。
从v0.14起，从事件处理程序返回 false 将不再停止事件冒泡。 应该根据需要手动 e.stopPropagation() 或 e.preventDefault() 。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
React中的事件对象e是一个合成对象，而不是原生的事件对象，React已经对这个对象进行了封装，处理了浏览器兼容问题。
- 这个对象是SyntheticEvent 的实例，这是一个跨浏览器原生事件包装器。 它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，除了事件在所有浏览器中他们工作方式都相同。
- React的事件处理程序由冒泡阶段中的事件触发。 要为捕获阶段注册事件处理程序，使用 onClickCapture 来处理捕获阶段中的点击事件，而不是使用 onClick 。
在React中获取事件对象时有两种形式
- 通过箭头函数显式传入
- 通过bind隐式传入 e会作为最后一个参数隐式传入
<li onClick={e=>{this.changeActive(e,"a")}}>用户管理</li>
<li onClick={this.changeActive.bind(this,"b")}>适配器管理</li>
changeActive(param1,param2){
console.log(param1);
console.log(param2);
console.log(this);
}
bind函数和箭头函数也是在React事件传参的方法
React中的事件处理程序由冒泡阶段中的事件触发。
要为捕获阶段注册事件处理程序，将 Capture 附加到事件名称中;使用 onClickCapture 来处理捕获阶段中的点击事件，而不是使用 onClick 。
React事件中的冒泡
1. 组织React合成事件冒泡
e.stopPropagation()
2. 阻止React合成事件与最外层document上的事件间的冒泡
e.nativeEvent.stopImmediatePropagation();
