Das onKeyDown-Ereignis funktioniert nicht mit Divs in React

Ich möchte ein keyDown-Ereignis für ein div in React verwenden. Ich mache:

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

Es funktioniert gut, aber ich würde es gerne mehr im React-Stil machen. Ich habe es versucht

        onKeyDown={this.onKeyPressed}

auf der Komponente. Aber es reagiert nicht. Soweit ich mich erinnere, funktioniert es mit Eingabeelementen.

Codepen

Wie kann ich es tun?

Sie sollten das tabIndex- Attribut verwenden, um ein onKeyDownEreignis in einem Div in React abhören zu können . Die Einstellung tabIndex="0"sollte Ihren Handler auslösen.

Sie müssen es so schreiben

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

Wenn dies onKeyPressednicht gebunden ist this, versuchen Sie, es mithilfe der Pfeilfunktion neu zu schreiben oder in die Komponente zu binden constructor.

Sie denken zu viel in reinem Javascript. Befreien Sie sich von Ihren Listenern für diese React-Lebenszyklusmethoden und verwenden Sie event.keystattdessen event.keyCode(da dies kein JS-Ereignisobjekt ist, sondern ein React SyntheticEvent ). Ihre gesamte Komponente könnte so einfach sein (vorausgesetzt, Sie haben Ihre Methoden nicht in einem Konstruktor gebunden).

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

Die Antwort mit

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

funktioniert für mich, bitte beachten Sie, dass der tabIndex eine Zahl und keine Zeichenfolge erfordert, sodass tabIndex = "0" nicht funktioniert.

Sie vermissen die Bindung der Methode im Konstruktor. So schlägt React vor, dass Sie es tun:

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

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

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

Es gibt andere Möglichkeiten, dies zu tun, aber dies ist zur Laufzeit am effizientesten.

Sie müssen verhindern, dass das Standardereignis ausgelöst wird.

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