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

Question

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

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

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

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

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

我找到了 this article，但它大部分都超出了我的理解范围，而且我仍然希望有更简单的方法来做到这一点。

Answer 1

React suggest to use preventDefault statement 而不是使用 return false:

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

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

示例：

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

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

react js how to prevent arrow keys from switching controls

javascript

user-interface

controls

key-bindings

reactjs