React中的全局键盘事件

Question

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

- Santiago

Answer 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>

- Tholle

Answer 2

这将与Tholle的答案示例相同，但使用React Hooks。

import {useState, useEffect} from 'react';

function App(){
    
  const [lastPressedKey, setLastPressedKey] = useState(null);
  
  const handleKeyPress = (event) => setLastPressedKey(event.key);
  
  useEffect(() => {
    window.addEventListener("keydown", handleKeyPress);
    
    return () => window.removeEventListener("keydown", handleKeyPress);
  }, []);

    return <div>Key last pressed: {lastPressedKey}</div>
}

- Lordgretix