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()进行指定(事件监 ...
随机推荐
- 【linux & &&命令】&后台(并行)命令 &&串行命令
& 放在一个命令末尾,可以将这个命令放到后台执行.放到后台后主进程将继续向下执行,后台命令将与主进程并行执行. && 放在一个命令末尾,与什么都没有单纯换行实际效果相同,等待 ...
- Java bytesToHexString 解析
一.代码 /** * Convert byte[] to hex string * * @param src byte[] data * @return hex string */ public st ...
- ubuntu 下执行定时任务
Window shell文件在linux系统下执行不了的解决办法 一些人喜欢用vim来写linux shell script, 但是, 有的人喜欢在Windows下用一些方便的编辑器(比如鼎鼎大名的N ...
- latex中文模板
\documentclass[UTF8,a4paper,10pt, twocolumn]{ctexart} \usepackage[left=2.50cm, right=2.50cm, top=2.5 ...
- oj2894(贝尔曼福特模板)
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2894 就因为粗心,一中午没A,题目说是2000 ...
- 你应该知道的最好Webmail邮件客户端,
1 . Kite Kite is an opensource replacement to Gmail. Kite is a webmail designed to look a lot like g ...
- 机器学习理论基础学习4--- SVM(基于结构风险最小化)
一.什么是SVM? SVM(Support Vector Machine)又称为支持向量机,是一种二分类的模型.当然如果进行修改之后也是可以用于多类别问题的分类.支持向量机可以分为线性和非线性两大类. ...
- 机器学习理论基础学习13--- 隐马尔科夫模型 (HMM)
隐含马尔可夫模型并不是俄罗斯数学家马尔可夫发明的,而是美国数学家鲍姆提出的,隐含马尔可夫模型的训练方法(鲍姆-韦尔奇算法)也是以他名字命名的.隐含马尔可夫模型一直被认为是解决大多数自然语言处理问题最为 ...
- EXTJS 4:在renderer中如何控制一个CheckColumn的行为,如显示,只读等属性
在编写grid下的column时,大家肯定会经常用到renderer这个方法来改变文字的呈现形式,那么如果该column是一个特殊的column,比如CheckColumn时,该方法应该怎样写呢?官方 ...
- 错误处理:WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping
今天在配置用户权限管理的时候,遇到了这么个错误: WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 ...