L'evento onKeyDown non funziona sui div in React

Voglio usare un evento keyDown su un div in React. Lo voglio:

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

Funziona bene, ma mi piacerebbe farlo di più in stile React. Provai

        onKeyDown={this.onKeyPressed}

sul componente. Ma non reagisce. Funziona su elementi di input come ricordo.

Codepen

Come posso farlo?

Dovresti usare l' attributo tabIndex per poter ascoltare l' onKeyDownevento su un div in React. L'impostazione tabIndex="0"dovrebbe licenziare il gestore.

Devi scriverlo in questo modo

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

Se onKeyPressednon è associato a this, prova a riscriverlo usando la funzione freccia o collegalo nel componente constructor.

Stai pensando troppo in puro Javascript. Sbarazzati dei tuoi ascoltatori su quei metodi del ciclo di vita React e usa event.keyinvece di event.keyCode(poiché questo non è un oggetto evento JS, è un React SyntheticEvent ). L'intero componente potrebbe essere così semplice (supponendo che non abbiate vincolato i vostri metodi in un costruttore).

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

La risposta con

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

funziona per me, tieni presente che tabIndex richiede un numero, non una stringa, quindi tabIndex = "0" non funziona.

Usare il divtrucco con tab_index="0"o tabIndex="-1"funziona, ma ogni volta che l'utente focalizza una vista che non è un elemento, si ottiene un brutto contorno di messa a fuoco sull'intero sito web. Questo può essere risolto impostando il CSS per il div da utilizzare outline: nonenel focus.

Ecco l'implementazione con componenti in stile:

import styled from "styled-components"

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

e nella classe App:

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

Ti manca l'associazione del metodo nel costruttore. Ecco come React ti suggerisce di farlo:

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

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

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

Ci sono altri modi per farlo, ma questo sarà il più efficiente in fase di esecuzione.

Devi impedire l'attivazione dell'evento predefinito.

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