React 上的全局键盘事件答案

【问题标题】：Global keyboards events on ReactReact 上的全局键盘事件
【发布时间】：2018-10-28 16:24:59
【问题描述】：

我正在 React 上制作一个小型鼓机，我的想法是当我按下键盘上的一个键时，会根据按下的键播放特定的声音。我遇到的问题是我希望 onKeyPress 或 onKeyDown 事件在窗口范围内工作，因为如果我将事件侦听器放在特定组件上，则该组件必须处于焦点才能侦听事件。我该怎么做？

【问题讨论】：

标签： reactjs addeventlistener

【解决方案1】：

您可以在最顶层组件的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>

【讨论】：