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

Question

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 très bien, mais je voudrais le faire plus 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 faire?

Answer 1

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

Answer 2

Vous devez écrire cette façon

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

Si onKeyPressed est pas lié à this, essayez de le réécrire en utilisant la fonction de flèche ou lier dans le composant constructor.

Answer 3

Vous pensez trop au pur Javascript. Débarrassez-vous de vos auditeurs sur ces méthodes de cycle de vie React et utilisez event.key au lieu de event.keyCode (parce que ce n'est pas un objet événement JS, il s'agit d'un Réaction 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> 
) 
}