событие OnKeyDown не работает на паркете Дворца игровых видов спорта в React

Я хочу использовать событие keydown на div в реакцию. Я делаю:

  componentWillMount() {
      document.addEventListener("keydown", this.onKeyPressed.bind(this));
  }

  componentWillUnmount() {
      document.removeEventListener("keydown", this.onKeyPressed.bind(this));
  }      

  onKeyPressed(e) {
    console.log(e.keyCode);
  }

  render() {
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
    return (
      <div 
        className="player"
        style={{ position: "absolute" }}
        onKeyDown={this.onKeyPressed} // not working
      >
        <div className="light-circle">
          <div className="image-wrapper">
            <img src={IMG_URL+player.img} />
          </div>
        </div>
      </div>
    )
  }

Он отлично работает, но я хотел бы сделать это более в стиле реагировать. Я попытался 

        onKeyDown={this.onKeyPressed}

на компоненте. Но это вовсе'т реагировать. Он работает на входных элементов насколько я помню.

Сайт CodePen

Как я могу сделать это?

Rich Warrior
Редактировал вопрос 20-го августа 2019 в 4:57
Программирование
events reactjs keypress keydown
19-го апреля 2017 в 6:57
23 просмотров
Комментарии к вопросу (1)
Решение

Вы должны использовать tabindex в атрибут уметь слушать событие OnKeyDown на div в реакцию. Параметр tabindex В=С"0" и должен срабатывать обработчик.

Комментарии (0)

Вам нужно написать его таким образом

<div 
    className="player"
    style={{ position: "absolute" }}
    onKeyDown={this.onKeyPressed}
    tabIndex="0"
  >

Если onKeyPressedне обязанэто`, то попробуйте переписать его, используя стрелки функции или привязать его в компонент "конструктор".

Panther
Редактировал ответ 20-го апреля 2017 в 1:28
Комментарии (5)

Вы'вэ слишком много думал на чистом JavaScript. Избавиться от ваших слушателей реагировать на эти методы жизненного цикла и использовать событие.ключ вместо событие.ключ (потому что это не в JS событие объекта, это реагировать SyntheticEvent). Весь ваш компонент может быть как простой, как это (если вы не'т связали методов в конструкторе).

onKeyPressed(e) {
  console.log(e.key);
}

render() {
  let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
  return (
    <div 
      className="player"
      style={{ position: "absolute" }}
      onKeyDown={(e) => this.onKeyPressed(e)}
    >
      <div className="light-circle">
        <div className="image-wrapper">

        </div>
      </div>
    </div>
  )
}
steel
Редактировал ответ 21-го апреля 2017 в 4:12
Комментарии (6)