Dogodki igrajo ključno vlogo pri ustvarjanju interaktivnih in dinamičnih uporabniških vmesnikov v React. V tej vadnici bomo raziskali, kako obravnavati dogodke React in se učinkovito odzvati na dejanja uporabnikov.
Obravnava dogodkov v JSX
React zagotavlja sintetični sistem dogodkov, ki ovije izvorne dogodke brskalnika in jih normalizira v različnih brskalnikih. Z atributom lahko elementom JSX neposredno pripnemo obdelovalce dogodkov onEventName
.
primer:
Obdelovalci dogodkov in objekti dogodkov
Ko se sproži dogodek, React samodejno posreduje objekt dogodka funkciji obdelovalca dogodkov. Do tega objekta lahko dostopamo, da pridobimo dodatne informacije o dogodku, kot so ciljni element, koordinate miške itd.
primer:
Obdelovalci zavezujočih dogodkov
Pri posredovanju obdelovalcev dogodkov kot rekvizitov je pomembno, da jih povežete s primerkom komponente. this
To zagotavlja, da se ob sprožitvi dogodka ohrani pravilen kontekst.
primer:
Razširjanje dogodkov in preprečevanje privzetih dejanj
React uporablja sintetični sistem dogodkov, ki samodejno obravnava širjenje dogodkov. Če želite preprečiti privzeto vedenje brskalnika, kot je oddaja obrazca ali navigacija po povezavi, lahko pokličemo metodo event.preventDefault()
.
primer:
Če razumete, kako obravnavati dogodke v React, lahko ustvarite interaktivne in odzivne uporabniške vmesnike, ki se neopazno odzivajo na dejanja uporabnikov
Tukaj je seznam pogostih dogodkov v React
1. onClick
: Ta dogodek se zgodi, ko se klikne element.
primer:
2. onChange
: Ta dogodek se zgodi, ko se spremeni vrednost vhodnega elementa(input, select, textarea).
primer:
3. onSubmit
: Ta dogodek se zgodi, ko je oddan obrazec. primer:
4. onMouseEnter
: Ta dogodek se zgodi, ko kazalec miške vstopi v element.
primer:
5. onMouseLeave
: Ta dogodek se zgodi, ko kazalec miške zapusti element.
primer:
6. onKeyDown
: Ta dogodek se zgodi, ko pritisnete tipko.
primer:
7. onKeyUp
: Ta dogodek se zgodi, ko je tipka izpuščena.
primer:
8. onFocus
: Ta dogodek se zgodi, ko element prejme fokus.
primer:
9. onBlur
: Ta dogodek se zgodi, ko element izgubi fokus.
primer:
10. onScroll
: Ta dogodek se zgodi, ko se element premika.
primer:
To je le nekaj primerov običajnih dogodkov v React. Te dogodke lahko uporabite ali ustvarite dogodke po meri v svoji React aplikaciji glede na vaše potrebe.