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