问题描述
现在,我正在尝试创建一个激活OnKeyDown的按钮,但是该命令仅在用户将鼠标悬停在按钮上并选中它时才起作用。有没有一种使用OnKeyDown的方法,所以您可以将鼠标悬停在屏幕另一侧的img上,按空格键,然后激活按钮。 像
render(){
return(
<div>
<button onKeyDown = {this.dostuff}/>
<img src = {thing}/>
</div>
);
}
除非将鼠标悬停在图像上并按空格键,否则将激活该按钮。
解决方法
您可以通过使用useEffect()
钩子(类似于componentDidMount()
)来实现此目的,并通过在组件中添加一个全局窗口事件侦听器到useEffect()
函数中的代码中已安装到屏幕上。
codesandbox中的代码示例