Evénement onKeyDown ne fonctionnant pas sur les divs dans React

Je veux utiliser un événement keyDown sur un div à Réagir. Je n':

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

Il fonctionne très bien, mais je voudrais ne plus Réagir de style. J'ai essayé

        onKeyDown={this.onKeyPressed}

sur le composant. Mais il ne réagit pas. Il fonctionne sur les éléments d'entrée que je me souviens.

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

Comment puis-je le faire?

source d'informationauteur Michael

  1. 35

    Vous devez utiliser tabIndex attribut pour être à l'écoute de l'événement onKeyDown sur un div à Réagir. Réglage de tabIndex="0" doit mettre le feu à votre gestionnaire.

  2. 3

    Vous devez l'écrire de cette façon

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

    Si onKeyPressed n'est pas lié à thispuis essayez de le réécrire à l'aide de la flèche de la fonction ou de la lier à l'élément constructor.

  3. 0

    Vous êtes en train de penser trop en Javascript. Débarrassez-vous de vos auditeurs sur ceux-ci Réagissent cycle de vie des méthodes et de l'utilisation event.key au lieu de event.keyCode (parce que ce n'est pas un JS objet d'événement, c'est une Réagir SyntheticEvent). L'ensemble de votre composant pourrait être aussi simple que cela (en supposant que vous n'avez pas tenu vos méthodes dans un constructeur).

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