react 为元素添加自定义事件监听器
https://zhenyong.github.io/react/tips/dom-event-listeners.html
class MovieItem extends React.Component { componentDidMount() {
// When the component is mounted, add your DOM listener to the "nv" elem.
// (The "nv" elem is assigned in the render function.)
this.nv.addEventListener("nv-enter", this.handleNvEnter);
} componentWillUnmount() {
// Make sure to remove the DOM listener when the component is unmounted.
this.nv.removeEventListener("nv-enter", this.handleNvEnter);
} // Use a class arrow function (ES7) for the handler. In ES6 you could bind()
// a handler in the constructor.
handleNvEnter = (event) => {
console.log("Nv Enter:", event);
} render() {
// Here we render a single <div> and toggle the "aria-nv-el-current" attribute
// using the attribute spread operator. This way only a single <div>
// is ever mounted and we don't have to worry about adding/removing
// a DOM listener every time the current index changes. The attrs
// are "spread" onto the <div> in the render function: {...attrs}
const attrs = this.props.index === 0 ? {"aria-nv-el-current": true} : {}; // Finally, render the div using a "ref" callback which assigns the mounted
// elem to a class property "nv" used to add the DOM listener to.
return (
<div ref={elem => this.nv = elem} aria-nv-el {...attrs} className="menu_item nv-default">
...
</div>
);
} }
react 为元素添加自定义事件监听器的更多相关文章
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- passive 的事件监听器
很久以前,addEventListener() 的参数约定是这样的: addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听器是在 ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- 深入理解React(二) —— 数据流和事件原理
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...
- js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
- JS事件监听器 addEventListener
一:例如:给id为mydiv1的div元素添加click事件监听器document.getElementById("mydiv1").addEventListener(" ...
- React生命周期及事件详解
引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...
- 对JavaScript事件处理程序/事件监听器的设定的简单介绍
下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...
随机推荐
- 洛谷P2657 windy数 [SCOI2009] 数位dp
正解:数位dp 解题报告: 传送门! 这题一看就是个数位dp鸭,"不含前导零且相邻两个数字之差至少为2"这种的 然后就直接套板子鸭(板子戳总结,懒得放链接辣QAQ 然后就是套路 然 ...
- ansible 批量在远程主机上执行命令
ansible 和 saltstack 都是为了同时在多台主机上执行相同的命令, 但是 salt配置麻烦,ansible基本不用配置, ansible 通过ssh来连接并控制被控节点 1. 安装 第一 ...
- windows环境下为php打开ssh2扩展
安装步骤 1. 下载 php extension ssh2下载地址 http://windows.php.net/downloads/pecl/releases/ssh2/0.12/ 根据自己PHP的 ...
- [LeetCode] 203. Remove Linked List Elements_Easy tag: Linked LIst
Remove all elements from a linked list of integers that have value val. Example: Input: 1->2-> ...
- C#调用VP 包含素材
VS2012 +VP9.0 ***************** 自己运行的时只要修改VP里面素材的路径即可 链接: https://pan.baidu.com/s/1J6Bc5FcBYLZLgqe30 ...
- Python + logging 输出到屏幕,将log日志写入文件
日志 日志是跟踪软件运行时所发生的事件的一种方法.软件开发者在代码中调用日志函数,表明发生了特定的事件.事件由描述性消息描述,该描述性消息可以可选地包含可变数据(即,对于事件的每次出现都潜在地不同的数 ...
- iOS UI基础-1.0加法计算器
1.打开Xcode,新建一个项目 2.Single View Application是最适合初学者的模板 3.填写该应用相关信息 4.搭建UI界面 项目创建完毕后,自动帮我们做了很多配置,也自动生成了 ...
- JSON—序列化
表单数据的序列化 用SerializeArray()将有效控件序列化为JSON对象数组? 包含name和value两个属性 SerializeArray()检测一组表单元素中的有效控件? 1.没有 ...
- 4:7 Struts实现Ajax
不使用插件: 返回数据: 使用插件: Action里面直接给User赋值,然后在前台拿值. type="json":表示返回json对象: root:表示作为跟对象 include ...
- 使用点击二分图传导计算query-document的相关性
之前的博客中已经介绍了Ranking Relevance的一些基本情况(Click Behavior,和Text Match):http://www.cnblogs.com/bentuwuying/p ...