Reactjs 当按下空格键而不是在按钮上时触发带有 keydown 的按钮

Question

Right now, I'm trying to create a button that activates OnKeyDown, but that command only works when the user is hovering over the button and has selected it. Is there a way to use OnKeyDown so you can hover over an img on the other side of the screen, press space bar, and activate the button. something like

render(){
return(
<div>

<button onKeyDown = {this.dostuff}/>
<img src = {thing}/>
</div>

);

}

Except when hovering over the image and pressing space the button is activated.

Answer 1

You can achieve this by using useEffect() hook, similar to componentDidMount() , and by doing so you can add a global window event listener to your code in the useEffect() function once the component has mounted to the screen.

Code sample in codesandbox