Zdarzenia odgrywają istotną rolę w tworzeniu interaktywnych i dynamicznych interfejsów użytkownika w programie React. W tym samouczku przyjrzymy się, jak efektywnie obsługiwać zdarzenia React i reagować na działania użytkowników.
Obsługa zdarzeń w JSX
React zapewnia syntetyczny system zdarzeń, który opakowuje natywne zdarzenia przeglądarki i normalizuje je w różnych przeglądarkach. Możemy dołączyć obsługę zdarzeń bezpośrednio do elementów JSX za pomocą onEventName
atrybutu.
Przykład:
Programy obsługi zdarzeń i obiekty zdarzeń
Po wyzwoleniu zdarzenia React automatycznie przekazuje obiekt zdarzenia do funkcji obsługi zdarzeń. Możemy uzyskać dostęp do tego obiektu, aby uzyskać dodatkowe informacje o zdarzeniu, takie jak element docelowy, współrzędne myszy itp.
Przykład:
Wiążące procedury obsługi zdarzeń
Podczas przekazywania procedur obsługi zdarzeń jako rekwizytów ważne jest, aby powiązać je z instancją komponentu. Zapewnia to zachowanie poprawnego this
kontekstu po wyzwoleniu zdarzenia.
Przykład:
Propagacja zdarzeń i zapobieganie domyślnym akcjom
React wykorzystuje syntetyczny system zdarzeń, który automatycznie obsługuje propagację zdarzeń. Aby zapobiec domyślnemu zachowaniu przeglądarki, takiemu jak przesyłanie formularza lub nawigacja po łączu, możemy wywołać event.preventDefault()
metodę.
Przykład:
Wiedząc, jak obsługiwać zdarzenia w programie React, możesz tworzyć interaktywne i responsywne interfejsy użytkownika, które płynnie reagują na działania użytkownika
Oto lista typowych wydarzeń w React
1. onClick
: To zdarzenie występuje po kliknięciu elementu.
Przykład:
2. onChange
: To zdarzenie ma miejsce, gdy zmienia się wartość elementu wejściowego(input, select, textarea).
Przykład:
3. onSubmit
: To zdarzenie ma miejsce podczas przesyłania formularza. Przykład:
4. onMouseEnter
: To zdarzenie ma miejsce, gdy wskaźnik myszy znajdzie się w elemencie.
Przykład:
5. onMouseLeave
: To zdarzenie ma miejsce, gdy wskaźnik myszy opuści element.
Przykład:
6. onKeyDown
: To zdarzenie występuje, gdy klawisz jest wciśnięty.
Przykład:
7. onKeyUp
: To zdarzenie ma miejsce po zwolnieniu klawisza.
Przykład:
8. onFocus
: To zdarzenie ma miejsce, gdy element otrzymuje fokus.
Przykład:
9. onBlur
: To zdarzenie ma miejsce, gdy element traci ostrość.
Przykład:
10. onScroll
: To zdarzenie występuje, gdy element jest przewijany.
Przykład:
To tylko niektóre przykłady typowych wydarzeń w programie React. Możesz użyć tych zdarzeń lub utworzyć niestandardowe zdarzenia zgodnie z własnymi potrzebami w swojej React aplikacji.