Wie erkenne ich den Esc-Tastendruck bei Reaktionen? Ähnlich wie bei jquery
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
Einmal erkannt, möchte ich die Info-Komponenten weitergeben. Ich habe 3 Komponenten, von denen die letzte aktive Komponente auf den Escape-Tastendruck reagieren muss.
Ich dachte an eine Art Registrierung, wenn eine Komponente aktiv wird
class Layout extends React.Component {
onActive(escFunction){
this.escFunction = escFunction;
}
onEscPress(){
if(_.isFunction(this.escFunction)){
this.escFunction()
}
}
render(){
return (
<div class="root">
<ActionPanel onActive={this.onActive.bind(this)}/>
<DataPanel onActive={this.onActive.bind(this)}/>
<ResultPanel onActive={this.onActive.bind(this)}/>
</div>
)
}
}
und auf allen Komponenten
class ActionPanel extends React.Component {
escFunction(){
//Do whatever when esc is pressed
}
onActive(){
this.props.onActive(this.escFunction.bind(this));
}
render(){
return (
<input onKeyDown={this.onActive.bind(this)}/>
)
}
}
Ich glaube, das wird funktionieren, aber ich denke, es wird eher ein Rückruf sein. Gibt es einen besseren Weg, um damit umzugehen?
javascript
reactjs
Neo
quelle
quelle
Antworten:
Wenn Sie nach einer Schlüsselereignisbehandlung auf Dokumentebene suchen,
componentDidMount
ist es am besten, diese während zu binden (wie im Codepen-Beispiel von Brad Colthurst gezeigt ):Beachten Sie, dass Sie sicherstellen sollten, dass der Listener für Schlüsselereignisse beim Aufheben der Bereitstellung entfernt wird, um mögliche Fehler und Speicherlecks zu vermeiden.
BEARBEITEN: Wenn Sie Hooks verwenden, können Sie diese
useEffect
Struktur verwenden, um einen ähnlichen Effekt zu erzielen:quelle
addEventListener
undremoveEventListener
?focus
nicht in die Luft sprudeln . Es ist nicht relevant fürkeydown
, aber es war früher nicht optional, daher wird es normalerweise aus Gründen der Kompatibilität mit IE <9 angegeben.this.escFunction
in eine Funktion wie einwickelnfunction() { this.escFunction(event) }
einschließen, sonst wurde sie beim Laden der Seite ohne "Keydown" ausgeführt.Sie sollten auf Flucht
keyCode
(27) aus der Reaktion hörenSyntheticKeyBoardEvent
onKeyDown
:Der in den Kommentaren der Frage veröffentlichte CodePen von Brad Colthurst ist hilfreich, um Schlüsselcodes für andere Schlüssel zu finden.
quelle
onKeyPress
wenn die gedrückte Taste ESC ist und der Fokus im Inneren liegt<input type="text" />
. In diesem Szenario können SieonKeyDown
undonKeyUp
, beide feuern, in der richtigen Reihenfolge verwenden.Eine andere Möglichkeit , dies in einer funktionalen Komponente zu erreichen, ist zu verwenden
useEffect
unduseFunction
, wie folgt aus :Anstelle von console.log können Sie
useState
etwas auslösen.quelle
React verwendet SyntheticKeyboardEvent , um das native Browserereignis zu verpacken, und dieses Synthetic-Ereignis bietet ein benanntes Schlüsselattribut ,
das Sie wie folgt verwenden können:
quelle
e.key
fürEscape
kommt zurück alsEsc
#triggeredFür eine wiederverwendbare React Hook-Lösung
Verwendung:
quelle