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 为元素添加自定义事件监听器的更多相关文章

  1. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  2. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  3. passive 的事件监听器

    很久以前,addEventListener() 的参数约定是这样的: addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听器是在 ...

  4. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  5. 深入理解React(二) —— 数据流和事件原理

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...

  6. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  7. JS事件监听器 addEventListener

    一:例如:给id为mydiv1的div元素添加click事件监听器document.getElementById("mydiv1").addEventListener(" ...

  8. React生命周期及事件详解

    引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...

  9. 对JavaScript事件处理程序/事件监听器的设定的简单介绍

    下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...

随机推荐

  1. 【linux & &&命令】&后台(并行)命令 &&串行命令

    & 放在一个命令末尾,可以将这个命令放到后台执行.放到后台后主进程将继续向下执行,后台命令将与主进程并行执行. &&  放在一个命令末尾,与什么都没有单纯换行实际效果相同,等待 ...

  2. Java bytesToHexString 解析

    一.代码 /** * Convert byte[] to hex string * * @param src byte[] data * @return hex string */ public st ...

  3. ubuntu 下执行定时任务

    Window shell文件在linux系统下执行不了的解决办法 一些人喜欢用vim来写linux shell script, 但是, 有的人喜欢在Windows下用一些方便的编辑器(比如鼎鼎大名的N ...

  4. latex中文模板

    \documentclass[UTF8,a4paper,10pt, twocolumn]{ctexart} \usepackage[left=2.50cm, right=2.50cm, top=2.5 ...

  5. oj2894(贝尔曼福特模板)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2894 就因为粗心,一中午没A,题目说是2000 ...

  6. 你应该知道的最好Webmail邮件客户端,

    1 . Kite Kite is an opensource replacement to Gmail. Kite is a webmail designed to look a lot like g ...

  7. 机器学习理论基础学习4--- SVM(基于结构风险最小化)

    一.什么是SVM? SVM(Support Vector Machine)又称为支持向量机,是一种二分类的模型.当然如果进行修改之后也是可以用于多类别问题的分类.支持向量机可以分为线性和非线性两大类. ...

  8. 机器学习理论基础学习13--- 隐马尔科夫模型 (HMM)

    隐含马尔可夫模型并不是俄罗斯数学家马尔可夫发明的,而是美国数学家鲍姆提出的,隐含马尔可夫模型的训练方法(鲍姆-韦尔奇算法)也是以他名字命名的.隐含马尔可夫模型一直被认为是解决大多数自然语言处理问题最为 ...

  9. EXTJS 4:在renderer中如何控制一个CheckColumn的行为,如显示,只读等属性

    在编写grid下的column时,大家肯定会经常用到renderer这个方法来改变文字的呈现形式,那么如果该column是一个特殊的column,比如CheckColumn时,该方法应该怎样写呢?官方 ...

  10. 错误处理:WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping

    今天在配置用户权限管理的时候,遇到了这么个错误: WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 ...