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

Vous devez utiliser tabIndex attribut pour pouvoir écouter onKeyDown sur un div en React. Réglage de tabIndex="0" devrait renvoyer votre gestionnaire.

Answer 2

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 puis essayez de le réécrire en utilisant la fonction flèche ou en le liant au composant. constructor .

Answer 3

Vous pensez trop en Javascript pur. Débarrassez-vous de vos écouteurs sur ces méthodes du cycle de vie de React et utilisez event.key au lieu de event.keyCode (parce que ce n'est pas un objet d'événement JS, c'est un objet 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={this.onKeyPressed}
    >
      <div className="light-circle">
        <div className="image-wrapper">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}

Answer 4

Utilisation de la div tour avec tab_index="0" o tabIndex="-1" fonctionne, mais chaque fois que l'utilisateur met au point une vue qui n'est pas un élément, vous obtenez un affreux focus-outline sur l'ensemble du site Web. Pour remédier à ce problème, il suffit d'utiliser la feuille de style en cascade (CSS) de la division. outline: none dans le foyer.

Voici l'implémentation avec des composants stylisés :

import styled from "styled-components"

const KeyReceiver = styled.div`
  &:focus {
    outline: none;
  }
`

et dans la classe App :

  render() {
    return (      
      <KeyReceiver onKeyDown={this.handleKeyPress} tabIndex={-1}>
          Display stuff...
      </KeyReceiver>
    )

Answer 5

La réponse avec

<div 
    className="player"
    onKeyDown={this.onKeyPressed}
    tabIndex={0}
>

fonctionne pour moi, veuillez noter que le tabIndex nécessite un nombre, pas une chaîne de caractères, donc tabIndex="0" ne fonctionne pas.