时间戳

首页 > 解决方案 > react js如何防止方向键切换控件

javascript - react js如何防止方向键切换控件

问题描述

我正在开发基于浏览器的反应游戏，玩家可以选择一个单位放置在战场上，然后他可以使用箭头键在地图上移动该单位。

问题是单位列表是一个反应单选组，并且按下箭头键也会将焦点从一个单选按钮切换到下一个单选按钮，这会导致通过相同的操作选择不同的单元（并且确实）移动了初始单元，所以整个事情变得非常混乱。

我使用绑定到方法的事件侦听器componentDidMount来绑定箭头键来移动单元。

componentDidMount(){
  ...
  document.addEventListener("keydown", this.handleKeyDown.bind(this));
  document.addEventListener("keyup", this.handleKeyUp.bind(this));

虽然可能有很多方法可以解决这个问题，但我更愿意使用箭头键简单地禁用单选按钮的切换。有谁知道如何关闭它？

我找到了这篇文章，但大部分时间都超出了我的想象，此外我仍然希望有一种更简单的方法来做到这一点。

标签： javascriptreactjsuser-interfacecontrolskey-bindings

解决方案

React 建议使用preventDefault语句而不是使用 return false：

handleKeyDown = (e) => {
 //... rest of your code
 e.preventDefault()
}

此外，您不需要addEventListener在 componentDidMount 挂钩内进行绑定。该事件将从event binding组件调用。

例子：

<YourComponent onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} />

推荐阅读