react.js - React ES6 如何绑定键盘事件？

问题描述

问 题

1.出现的问题
在使用React时需要给页面绑定一个键盘按下的事件，绑定后按下键盘并没有反应。

2.相关代码

该组件是核心组件，这里的renturn()是在render()方法中。出现的问题即onKeyPress事件,我将按键事件绑定在了组件最外层的section上。

上图是事件处理函数，我输出到控制台检测发现并没有打印出该字符串。

我的事件现在就绑定在.player这个section上

3.报错信息
没有任何的报错提示。

4.我尝试的解决办法
我尝试了把onKeyPress改成了onClick, 事件则可以正常的通过点击触发。这说明程序写法没有问题，而且我其他地方也写了很多其他时间的绑定都没问题。
又查了官方文档，是支持键盘事件onKeyDown onKeyPress onKeyUp的。

在写原生js我都是把键盘事件绑定在document上，但不知道react中如何解决？

不存在其他的按键事件，事件应该不会被截取吧。

解决方案

请在componentDidMount方法中绑定事件 componentWillUnmount方法中解绑事件。
React通过ref拿到原始DOM通过addEventListener的方法监听事件

这篇关于react.js - React ES6 如何绑定键盘事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！