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} />

反应js如何防止箭头键切换控件

1 个答案: