web-dev-qa-db-fra.com

l'événement onKeyDown ne fonctionne pas sur les div dans React

Je souhaite utiliser un événement keyDown sur un div dans React. Je fais:

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

Cela fonctionne bien, mais je voudrais le faire davantage dans le style React. j'ai essayé 

        onKeyDown={this.onKeyPressed}

sur le composant. Mais ça ne réagit pas. Cela fonctionne sur les éléments d'entrée, si je me souviens bien.

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

Comment puis-je le faire?

reactjseventskeypresskeydown
36
Michael

Vous devez utiliser tabIndex attribut pour pouvoir écouter l'événement onKeyDown sur un div dans React. La définition de tabIndex = "0" devrait renvoyer votre gestionnaire.

65
burakhan alkan

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é à this, essayez de la récrire à l'aide de la fonction de flèche ou reliez-la dans le composant constructor.

11
Panther

Vous pensez trop en Javascript pur. Débarrassez-vous de vos auditeurs avec ces méthodes du cycle de vie de React et utilisez event.key au lieu de event.keyCode (puisqu'il ne s'agit pas d'un objet événement JS, il s'agit d'un React SyntheticEvent ). Votre composant entier pourrait être aussi simple que cela (en supposant que vous n'avez pas lié 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>
  )
}
1
steel