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.
Wie kann ich es tun?
Antworten:
Sie sollten das tabIndex- Attribut verwenden, um ein
onKeyDown
Ereignis in einem Div in React abhören zu können . Die EinstellungtabIndex="0"
sollte Ihren Handler auslösen.quelle
tabIndex={-1}
kann auch verwendet werden, wenn Sie mit einem Element arbeiten, das nicht interaktiv ist und die Tabulatorreihenfolge des Dokuments nicht ändern möchten.Sie müssen es so schreiben
Wenn dies
onKeyPressed
nicht gebunden istthis
, versuchen Sie, es mithilfe der Pfeilfunktion neu zu schreiben oder in die Komponente zu bindenconstructor
.quelle
console.log
gibt sie nichts aus?Sie denken zu viel in reinem Javascript. Befreien Sie sich von Ihren Listenern für diese React-Lebenszyklusmethoden und verwenden Sie
event.key
stattdessenevent.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).quelle
event
Objekt ist ein React SyntheticEvent .onClick
Requisite anstelle des Handlerfeuers in eine GeigeonKeyDown
stecke.Die Antwort mit
funktioniert für mich, bitte beachten Sie, dass der tabIndex eine Zahl und keine Zeichenfolge erfordert, sodass tabIndex = "0" nicht funktioniert.
quelle
Sie vermissen die Bindung der Methode im Konstruktor. So schlägt React vor, dass Sie es tun:
Es gibt andere Möglichkeiten, dies zu tun, aber dies ist zur Laufzeit am effizientesten.
quelle
Sie müssen verhindern, dass das Standardereignis ausgelöst wird.
quelle