O evento onKeyDown não está funcionando em divs no React

Quero usar um evento keyDown em um div no React. Eu faço:

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

Funciona bem, mas gostaria de fazer mais no estilo React. eu tentei

        onKeyDown={this.onKeyPressed}

no componente. Mas não reage. Ele funciona em elementos de entrada, se bem me lembro.

Codepen

Como eu posso fazer isso?

Você deve usar o atributo tabIndex para poder ouvir o onKeyDownevento em um div no React. A configuração tabIndex="0"deve disparar seu manipulador.

Você precisa escrever assim

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

Se onKeyPressednão estiver vinculado a this, tente reescrevê-lo usando a função de seta ou vinculá-lo ao componente constructor.

Você está pensando muito em Javascript puro. Livre-se de seus ouvintes nesses métodos de ciclo de vida React e use em event.keyvez de event.keyCode(porque este não é um objeto de evento JS, é um React SyntheticEvent ). Todo o seu componente pode ser tão simples quanto isso (assumindo que você não vinculou seus métodos em um construtor).

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

A resposta com

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

funciona para mim, observe que tabIndex requer um número, não uma string, portanto tabIndex = "0" não funciona.

Usando o div truque com tab_index="0"ou tabIndex="-1"funciona, mas sempre que o usuário está focalizando uma visualização que não é um elemento, você obtém um esboço de foco feio em todo o site. Isso pode ser corrigido definindo o CSS para o div usar outline: noneno focus.

Esta é a implementação com componentes estilizados:

import styled from "styled-components"

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

e na classe App:

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

Você está perdendo a vinculação do método no construtor. É assim que o React sugere que você faça:

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

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

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

Existem outras maneiras de fazer isso, mas será a mais eficiente em tempo de execução.

Você tem que evitar que o evento padrão seja acionado.

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