React ES6 如何绑定键盘事件？

Question

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

2.相关代码

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

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

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

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

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

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

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

Answer 1

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

Answer 2

我也遇到了同类问题，请问你的问题已经解决了么？可否讲解一下

Answer 3

 render() {
        return (
            <input
                className="search-input" 
                type="text" 
                placeholder="请输入关键字" 
                onChange={this.ChangeHandle.bind(this)}
                onKeyUp={this.KeyUpHandle.bind(this)}
                value={this.state.value}/>
        )
    }
   
    KeyUpHandle(e) {
        // 监控 enter 事件
        if (e.keyCode !== 13) {
            return
        }
        this.props.enterHandle(e.target.value)
    }

Answer 4

在非表单元素绑定键盘事件，需要设置tabIndex属性，比如设置tabIndex="0"