React/事件系统
React基于虚拟DOM实现了一个合成事件层,我们所定义的事件处理器会接收到一个合成事件对象的实例事件处理。
并且所有事件都自动绑定在最外层上。如果需要访问原生事件对象,可以使用nativeEvent属性。
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:
- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
在 React 中另一个不同点是你不能通过返回 false
的方式阻止默认行为。你必须显式的使用 preventDefault
当你使用 ES6 class 语法定义一个组件的时候,通常的做法是将事件处理函数声明为 class 中的方法。
你必须谨慎对待 JSX 回调函数中的 this
,在 JavaScript 中,class 的方法默认不会绑定 this
。如果你忘记绑定 this.handleClick
并把它传入了 onClick
,当你调用这个函数的时候 this
的值为 undefined
。
这并不是 React 特有的行为;这其实与 JavaScript 函数工作原理有关。通常情况下,如果你没有在方法后面添加 ()
,例如 onClick={this.handleClick}
,你应该为这个方法绑定 this
。
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')
);
向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
合成事件
Synthetic(人造的,合成的)
SyntheticEvent
实例将被传递给你的事件处理函数,它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外,它还拥有和浏览器原生事件相同的接口,包括 stopPropagation()
和 preventDefault()
。
如果因为某些原因,当你需要使用浏览器的底层事件时,只需要使用 nativeEvent
属性来获取即可。
事件池
SyntheticEvent
是合并而来。这意味着 SyntheticEvent
对象可能会被重用,而且在事件回调函数被调用后,所有的属性都会无效。出于性能考虑,你不能通过异步访问事件。
如果你想异步访问事件属性,你需在事件上调用 event.persist()
,此方法会从池中移除合成事件,允许用户代码保留对事件的引用。
React/事件系统的更多相关文章
- React事件系统入门
React基于虚拟DOM实现了一个合成事件层,我们所定义的事件处理器会接受到一个合成事件层对象的实例,它完全符合W3C标准,不会存在任何IE标准的兼容性问题.并且和原生的浏览器事件一样拥有同样的接口, ...
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- React事件初探
作者:朱灵子 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序 ...
- React 17 要来了,非常特别的一版
写在前面 React 最近发布了v17.0.0-rc.0,距上一个大版本v16.0(发布于 2017/9/27)已经过去近 3 年了 与新特性云集的 React 16及先前的大版本相比,React 1 ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- React 17 All In One
React 17 All In One v17.0.1 https://reactjs.org/blog/2020/10/20/react-v17.html https://reactjs.org/b ...
- canvas也能实现事件系统????
前言 大家好! 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统, 然后呢? 我自己其实也对这个比较感兴趣, 我看过很多canvas 实现的项目, 比如canvas 实现思维导图 ...
- react开发教程(六)React与DOM
ReactDOM findeDOMNode 语法:DOMElement findDOMNode(ReactComponent component)描述:获取改组件实例相对应的DOM节点 案例: imp ...
- 王下邀月熊_Chevalier的前端每周清单系列文章索引
感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...
随机推荐
- android studio 错误汇总以及解决办法
android studio 错误汇总以及解决办法 参考 https://www.jianshu.com/p/7c7de6562231 问题1. Error:Execution failed for ...
- 判断Activty是否在前台运行
/** * 判断某个界面是否在前台 * * @param context * @param className 某个界面名称 * */ public static boolean isActivity ...
- ISO/IEC 9899:2011 条款6.2.2——标识符的连接
6.2.2 标识符的连接 1.在不同作用域中声明的一个标识符或在同一作用域多次出现的一个标识符可以被用作对同一个对象或函数的引用,通过一个称为连接的过程.[注:在两个不同的标识符之间没有连接.]有三种 ...
- osg qt 三维模型加载
osg::ref_ptr<osg::Node> OSG_Qt_::operateMatrix() { osg::ref_ptr<osg::Group> group = new ...
- Qt pri文件
pri文件就是一个简单的文件夹包含或者动态库调用路径等说明,在pro文件里include了pri文件,相当于把pri文件的内容直接复制到pro文件中
- 123457123456#0#-----com.threeapp.magicImageShow01----儿童宝宝魔法画笔
com.threeapp.magicImageShow01----儿童宝宝魔法画笔
- 【设计思路】Booking优化
https://www.uisdc.com/booking-redesign https://medium.muz.li/booking-com-ux-case-study-7ffb39e54791
- 折线图值和坐标轴y轴不对应问题记录
这个问题的产生是由于,在代码中加入了累加算法导致, series: lineObject.sort.map(item => { return ( { name: item, type: 'lin ...
- myeclipse安装activiti-designer
将压缩包中的features和plugins放到dropins下,然后重启myeclipse activiti-designer下载地址: 链接:https://pan.baidu.com/s/19u ...
- Spring Maven工程引入css,js
1.CSS <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="t ...