L'événement onKeyDown ne fonctionne pas sur les divs dans React

Question

Je veux utiliser un événement keyDown sur un div dans React. Je le 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 j'aimerais le faire plus dans le style React. J'ai essayé

        onKeyDown={this.onKeyPressed}

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

Codepen

Comment puis-je le faire ?

Answer 1

Il vous manque la liaison de la méthode dans le constructeur. C'est ainsi que React vous suggère de le faire :

class Whatever {
  constructor() {
    super();
    this.onKeyPressed = this.onKeyPressed.bind(this);
  }

  onKeyPressed(e) {
    // your code ...
  }

  render() {
    return (<div onKeyDown={this.onKeyPressed} />);
  }
}

Il existe d'autres façons de procéder, mais celle-ci sera la plus efficace au moment de l'exécution.