OnKeyDown event не работает на divs в React

Я хочу использовать событие keyDown на div в React. Я:

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

он работает нормально, но я хотел бы сделать это больше в стиле React. Я пытался!--3--> 

        onKeyDown={this.onKeyPressed}

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

Codepen:http://codepen.io/lafisrap/pen/OmyBYG

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

21
events keydown keypress reactjs

3 ответов

вы должны использовать свойство tabindex атрибут, чтобы иметь возможность прослушивать событие onKeyDown на div в React. Установка tabIndex= "0"должна запустить обработчик.

43

вам нужно написать это так

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

если onKeyPressed не обязан this, затем попробуйте переписать его с помощью функции стрелки или связать его в компоненте constructor.

5

вы слишком много думаете в чистом Javascript. Избавьтесь от своих слушателей на этих методах жизненного цикла React и используйте event.key вместо event.keyCode (поскольку это не объект события JS, это React 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">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}
0