javascript 反应不响应按键事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32255075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React not responding to key down event
提问by Simpleton
I'm trying to implement some very basic key press detection and I can't get it to work at all. I have a bare component that should be picking up on the onKeyDownevent but nothing gets logged out in the console:
我正在尝试实现一些非常基本的按键检测，但我根本无法让它工作。我有一个应该接收onKeyDown事件的裸组件，但控制台中没有任何内容被注销：
class App extends React.Component {
constructor(props) {
super(props);
}
handleKeyDown(event) {
console.log('handling a key press');
}
render() {
return (
<ChildComponent onKeyDown={this.handleKeyDown} />
);
}
}
React.render(<App />, document.getElementById('app'));
采纳答案by widged
The problem is that ChildComponentis not a component but a component factory. It will be replaced with the result of rendering the element created with that factory.
问题在于它ChildComponent不是组件而是组件工厂。它将被替换为渲染由该工厂创建的元素的结果。
Insert the ChildComponentin a div and attach any event listener to the div, not ChildComponent. Replace <div>with <span>if you need inline display.
将 插入ChildComponentdiv 并将任何事件侦听器附加到 div，而不是ChildComponent. 如果需要内嵌显示，请替换<div>为<span>。
let {Component} = React;
class ChildComponent extends Component {
render() {
return ( <child-component>click me</child-component> );
}
}
class App extends Component {
handleClick(event) {
console.log('handling a key press');
}
render() {
return ( <div onClick={this.handleClick}><ChildComponent /></div> );
}
}
React.render(<App />, document.getElementById('app'));
See it in action on codepen
回答by Pete TNT
You'll need to assign a tabIndex-attribute for your element (the wrapping element for example) for it to receive keypresses. Then pass the keyDown handler to it with the props:
您需要tabIndex为您的元素（例如包装元素）分配一个-attribute 以接收按键。然后使用 props 将 keyDown 处理程序传递给它：
import React from 'react';
import { render } from 'react-dom';
class ChildComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div tabIndex="0" onKeyDown={this.props.handleKeyDown}>Fooo</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
handleKeyDown(event) {
console.log('handling a key press');
}
render() {
return (
<ChildComponent handleKeyDown={() => this.handleKeyDown()} />
);
}
}
render(<App />, document.getElementById('app'));
回答by Benny
The DOM wants the element to be focused in order to receive the keyboard event. If you don't want to hack the element with tabIndexor contentEditableto get it to focus, you could use native DOM event listeners on window, and define a different handler in each component that handles keyboard events.
DOM 希望元素获得焦点以接收键盘事件。如果您不想使用 hack 元素tabIndex或contentEditable使其聚焦，则可以在 上使用本机 DOM 事件侦听器window，并在每个处理键盘事件的组件中定义不同的处理程序。
Just be sure to remove the event listener when that component unmounts so all components aren't handling all the time:
只要确保在该组件卸载时删除事件侦听器，以便所有组件都不会一直处理：
componentWillMount: function() {
window.addEventListener('keydown', this.handleKeyDown);
},
componentWillUnmount: function() {
window.removeEventListener('keydown', this.handleKeyDown);
},
Also, there appears to be an npm that provides similar functionality if that's easier: https://www.npmjs.com/package/react-keydown
此外，如果更容易的话，似乎有一个 npm 可以提供类似的功能：https: //www.npmjs.com/package/react-keydown
回答by Jeff Fairley
In an app my team is working on, we're using react-hotkey. Unfortunately, React doesn't seem to support mixins with ES6 syntax, but if you're cool with some babel, you could give it a try.
在我的团队正在开发的应用程序中，我们使用的是react-hotkey。不幸的是，React 似乎不支持使用 ES6 语法的 mixin，但是如果你对一些 babel 很酷，你可以尝试一下。
let App = React.createClass({
mixins: [hotkey.Mixin('handleKeyDown')],
componentDidMount() {
hotkey.activate();
},
componentWillUnmount() {
hotkey.disable();
},
handleKeyDown(event) {
console.log('handling a key press');
},
render() {
return (
<ChildComponent />
);
}
});
React.render(<App />, document.getElementById('app'));
