L'événement onKeyDown ne fonctionne pas sur les divs 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 j'aimerais 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 comme je me souviens.

Codepen

Comment puis-je le faire?

Vous devez utiliser l' attribut tabIndex pour pouvoir écouter l' onKeyDownévénement sur un div dans React. Le réglage tabIndex="0"devrait mettre le feu à votre gestionnaire.

Vous devez l'écrire de cette façon

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

Si onKeyPressedn'est pas lié à this, essayez de le réécrire à l'aide de la fonction de flèche ou de le lier dans le composant constructor.

Vous pensez trop en Javascript pur. Débarrassez-vous de vos écouteurs sur ces méthodes de cycle de vie React et utilisez à la event.keyplace de event.keyCode(car il ne s'agit pas d'un objet événement JS, il s'agit d'un événement synthétique React ). Votre composant entier pourrait être aussi simple que cela (en supposant que vous n'ayez 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>
  )
}

La réponse avec

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

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

L'utilisation de l' divastuce avec tab_index="0"ou tabIndex="-1"fonctionne, mais chaque fois que l'utilisateur se concentre sur une vue qui n'est pas un élément, vous obtenez un aperçu de la mise au point laide sur l'ensemble du site Web. Cela peut être résolu en définissant le CSS pour le div à utiliser outline: nonedans le focus.

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

Il vous manque la liaison de la méthode dans le constructeur. Voici comment React vous propose 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 moyens de le faire, mais ce sera le plus efficace lors de l'exécution.

Vous devez empêcher l'événement par défaut de se déclencher.

onKeyPressed(e) {
   e.preventDefault();
   console.log(e.key);
}