Implementieren Sie Tastaturereignisse in React

Tastaturereignisse sind Benachrichtigungen, die an Ihren Computer oder Webbrowser gesendet werden, wenn Sie eine Taste auf Ihrer Tastatur drücken, gedrückt halten oder loslassen. Diese Ereignisse werden von Anwendungen und Websites verwendet, um auf Benutzereingaben zu reagieren und entsprechende Aktionen auszuführen. 

In diesem Tutorial lernen Sie Tastaturereignisse und deren Handhabung in React.

Ereignisse in JavaScript

In JavaScript sind Ereignisse lediglich ein Hinweis darauf, dass ein Benutzer eine bestimmte Aktion ausgeführt hat. Sie können auf die Ereignisse keydown und keyup warten, die anzeigen, wann eine Tastatur betätigt wird Taste gedrückt oder losgelassen wird.

Hier ist ein typischer Beispielcodeblock für die Implementierung von Tastaturereignissen mit JavaScript. Der folgende Codeblock protokolliert eine Anweisung, die die jeweilige vom Benutzer gedrückte Taste anzeigt.

document.addEventListener('keydown', function(event){
		console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
)

Beachten Sie, dass jeder Schlüssel über einen eindeutigen Bezeichner verfügt, der in der an die Rückruffunktion übergebenen KeyboardEvent-Taste verfügbar ist. Der obige Codeblock zeigt Folgendes in der Konsole an, wenn eine Taste gedrückt wird.

# Key: Alt has been pressed
# Key: ArrowDown has been pressed

Ereignisse in Reaktion

Die Handhabung von Ereignissen in React unterscheidet sich ein wenig von Ereignissen in HTML. Ein Klick-Handler in HTML wird beispielsweise wie folgt ausgeführt:

<button onclick="launchApp()">
		Click Me
</button>

In React würde dies wie folgt erfolgen:

<button onClick={launchApp}>
		Click Me
</button>

Was sind hier die wesentlichen Unterschiede? 

• Ereignisse in React werden in camelCase benannt.
• Anstatt eine String-Darstellung der Funktion zu übergeben, übergeben Sie in React aufgrund von JSX die Funktion selbst als Handler in geschweiften Klammern.

Tastaturereignisse in Reaktion

Mit Ihrem bisherigen allgemeinen Wissen über Ereignisse in React können Sie jetzt Tastaturereignisse in React implementieren. Wie bereits erwähnt, gibt es zwei Tastaturereignisse, die verwendet werden können: keyup und keydown< a i=4> Ereignisse.

Jetzt erstellen Sie eine einfache Quiz-App, die einen Benutzer anhand einer Ja- oder Nein-Antwort markiert.

Richten Sie zunächst die Create-React-App ein oder besuchen Sie https://react.new, um eine vollständig konfigurierte React-Umgebung über codesandbox zu erhalten .

import React from 'react';

function Quiz(){
	handleAnswerChange(event){
		if(event.key === 'y'){
			alert('The sky is your starting point!')
	}
		else if (event.key === 'n') {
			alert('The sky is your limit👀')
	}
}

	return (
		<div>
				<p> Are You Smart?</p>
					<input type="text" value={answer} onKeyPress={handleAnswerChange}/>
				<small> Press Y for Yes or N for No</small>
	</div>
)
}

Der obige Codeblock implementiert eine einfache Funktion namens handleAnswerChange, die prüft, ob die gedrückte Taste y ist für Ja oder n für Nein. Der Wert y oder n wird vom Tastendruck-Ereignis-Listener für das Eingabeelement abgerufen.

Dieser Leitfaden. Sie haben Ereignisse in React und HTML verglichen und gegenübergestellt und ein Verständnis dafür gewonnen, wie Tastaturereignisse in React implementiert werden.