我正在 React 上制作一个小型鼓机,我的想法是,当我按下键盘上的某个键时,会根据按下的键播放特定的声音。我遇到的问题是我希望 onKeyPress 或 onKeyDown 事件在窗口范围内工作,因为如果我将事件监听器放在特定组件上,则该组件必须处于焦点状态才能监听该事件。我该怎么做?
最佳答案
您可以在最顶层组件的 componentDidMount
窗口中添加一个 keydown
监听器。
示例
class App extends React.Component {
state = { lastPressedKey: null };
componentDidMount() {
window.addEventListener("keydown", this.handleKeyPress);
}
componentWillUnmount() {
window.removeEventListener("keydown", this.handleKeyPress);
}
handleKeyPress = event => {
this.setState({ lastPressedKey: event.key });
};
render() {
return <div>Key last pressed: {this.state.lastPressedKey}</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
关于reactjs - React 上的全局键盘事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53033625/