реагировать JS, как предотвратить переключение клавиш управления стрелками - PullRequest
Новая
       28

реагировать JS, как предотвратить переключение клавиш управления стрелками

0 голосов
/ 28 августа 2018

Я работаю над браузерной игрой, в которой игрок может выбрать юнит для размещения на поле битвы, а затем он может использовать клавиши со стрелками для перемещения юнита по карте.

Проблема в том, что список единиц - это реагирующая радиогруппа, и что нажатие клавиш со стрелками также переключает фокус с одной радиокнопки на другую, что приводит к тому, что другой блок выбирается тем же действием, которое должен был (и делает) переместить начальную единицу, так что все становится довольно запутанным.

Я использую прослушиватели событий, связанные с методом componentDidMount, чтобы связать клавиши со стрелками для перемещения устройства. 

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

Хотя может быть несколько способов решить эту проблему, я бы предпочел просто отключить переключение переключателя с помощью клавиш со стрелками. Кто-нибудь знает, как это отключить?

Я нашел эту статью , но в основном она затрагивает мою голову, и, кроме того, я все еще надеюсь, что есть более простой способ сделать это.

1 Ответ

0 голосов
/ 28 августа 2018

Реакция предлагает использовать preventDefault выражение вместо возврата false: 

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

Кроме того, вам не нужно связывать addEventListener внутри хука componentDidMount. Событие будет вызываться из event binding компонента.

Пример: 

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