webentwicklung-frage-antwort-db.com.de

das onKeyDown-Ereignis funktioniert nicht für 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. Es funktioniert auf Eingabeelementen, wie ich mich erinnere.

Codepen: http://codepen.io/lafisrap/pen/OmyBYG

Wie kann ich es tun?

36
Michael

Sie sollten das Attribut tabIndex verwenden, um das OnKeyDown-Ereignis eines Div in React abhören zu können. Das Festlegen von tabIndex = "0" sollte Ihren Handler auslösen.

65
burakhan alkan

Sie müssen es so schreiben

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

Wenn onKeyPressed nicht an this gebunden ist, versuchen Sie es mit der Pfeilfunktion neu zu schreiben oder binden Sie es in die Komponente constructor.

11
Panther

Sie denken zu viel in reinem Javascript. Entfernen Sie Ihre Listener für diese React-Lebenszyklusmethoden und verwenden Sie event.key anstelle von event.keyCode (da dies kein JS-Ereignisobjekt ist, handelt es sich um ein React SyntheticEvent ). Ihre gesamte Komponente könnte so einfach sein (vorausgesetzt, Sie haben Ihre Methoden in einem Konstruktor nicht 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>
  )
}
1
steel