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

Question

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

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

我使用绑定到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} />