Ereignisse spielen eine entscheidende Rolle bei der Erstellung interaktiver und dynamischer Benutzeroberflächen in React. In diesem Tutorial erfahren Sie, wie Sie mit Ereignissen umgehen React und effektiv auf Benutzeraktionen reagieren.
Ereignisbehandlung in JSX
React stellt ein synthetisches Ereignissystem bereit, das die nativen Browserereignisse umschließt und sie über verschiedene Browser hinweg normalisiert. Mit dem Attribut können wir Event-Handler direkt an JSX-Elemente anhängen onEventName
.
Beispiel:
Event-Handler und Event-Objekte
Wenn ein Ereignis ausgelöst wird, React wird automatisch ein Ereignisobjekt an die Ereignishandlerfunktion übergeben. Wir können auf dieses Objekt zugreifen, um zusätzliche Informationen über das Ereignis zu erhalten, wie z. B. Zielelement, Mauskoordinaten usw.
Beispiel:
Bindende Ereignishandler
Wenn Sie Ereignishandler als Requisiten übergeben, ist es wichtig, sie an die Komponenteninstanz zu binden. this
Dadurch wird sichergestellt, dass beim Auslösen des Ereignisses der richtige Kontext beibehalten wird.
Beispiel:
Ereignisweitergabe und Verhinderung von Standardaktionen
React verwendet ein synthetisches Ereignissystem, das die Ereignisweitergabe automatisch verwaltet. Um das Standardverhalten des Browsers zu verhindern, z. B. das Senden von Formularen oder die Linknavigation, können wir die event.preventDefault()
Methode aufrufen.
Beispiel:
Wenn Sie verstehen, wie mit Ereignissen umgegangen wird React, können Sie interaktive und reaktionsfähige Benutzeroberflächen erstellen, die nahtlos auf Benutzeraktionen reagieren
Hier ist eine Liste häufiger Ereignisse in React
1. onClick
: Dieses Ereignis tritt auf, wenn auf ein Element geklickt wird.
Beispiel:
2. onChange
: Dieses Ereignis tritt auf, wenn sich der Wert eines Eingabeelements(input, select, textarea) ändert.
Beispiel:
3. onSubmit
: Dieses Ereignis tritt auf, wenn ein Formular gesendet wird. Beispiel:
4. onMouseEnter
: Dieses Ereignis tritt auf, wenn der Mauszeiger ein Element betritt.
Beispiel:
5. onMouseLeave
: Dieses Ereignis tritt auf, wenn der Mauszeiger ein Element verlässt.
Beispiel:
6. onKeyDown
: Dieses Ereignis tritt auf, wenn eine Taste gedrückt wird.
Beispiel:
7. onKeyUp
: Dieses Ereignis tritt auf, wenn eine Taste losgelassen wird.
Beispiel:
8. onFocus
: Dieses Ereignis tritt auf, wenn ein Element den Fokus erhält.
Beispiel:
9. onBlur
: Dieses Ereignis tritt auf, wenn ein Element den Fokus verliert.
Beispiel:
10. onScroll
: Dieses Ereignis tritt auf, wenn ein Element gescrollt wird.
Beispiel:
Dies sind nur einige Beispiele für häufige Ereignisse in React. Sie können diese Ereignisse verwenden oder benutzerdefinierte Ereignisse entsprechend Ihren Anforderungen in Ihrer React Anwendung erstellen.