微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

当按下空格键而不是按钮时,ReactJS触发按钮按下键

如何解决当按下空格键而不是按钮时,ReactJS触发按钮按下键

现在,我正在尝试创建一个激活OnKeyDown的按钮,但是该命令仅在用户将鼠标悬停在按钮上并选中它时才起作用。有没有一种使用OnKeyDown的方法,所以您可以将鼠标悬停在屏幕另一侧的img上,按空格键,然后激活按钮。 像

render(){
return(
<div>

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

);

}

除非将鼠标悬停在图像上并按空格键,否则将激活该按钮。

解决方法

您可以通过使用useEffect()钩子(类似于componentDidMount())来实现此目的,并通过在组件中添加一个全局窗口事件侦听器到useEffect()函数中的代码中已安装到屏幕上。

codesandbox中的代码示例

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。