Arrangementer spiller en viktig rolle i å skape interaktive og dynamiske brukergrensesnitt i React. I denne opplæringen vil vi utforske hvordan du håndterer hendelser i React og reagerer på brukerhandlinger effektivt.
Hendelseshåndtering i JSX
React gir et syntetisk hendelsessystem som omslutter de opprinnelige nettleserhendelsene og normaliserer dem på tvers av forskjellige nettlesere. Vi kan knytte hendelsesbehandlere direkte til JSX-elementer ved å bruke attributtet onEventName
.
Eksempel:
Hendelsesbehandlere og hendelsesobjekter
Når en hendelse utløses, React sender et hendelsesobjekt automatisk til hendelsesbehandlerfunksjonen. Vi kan få tilgang til dette objektet for å få tilleggsinformasjon om hendelsen, som målelement, musekoordinater, etc.
Eksempel:
Bindende hendelsesbehandlere
Når du sender hendelsesbehandlere som rekvisitter, er det viktig å binde dem til komponentforekomsten. Dette sikrer at riktig this
kontekst opprettholdes når hendelsen utløses.
Eksempel:
Hendelsesutbredelse og forhindring av standardhandlinger
React bruker et syntetisk hendelsessystem som automatisk håndterer hendelsesforplantning. For å forhindre standard nettleseroppførsel, for eksempel skjemainnsending eller lenkenavigering, kan vi kalle metoden event.preventDefault()
.
Eksempel:
Ved å forstå hvordan du håndterer hendelser i React, kan du lage interaktive og responsive brukergrensesnitt som sømløst reagerer på brukerhandlinger
Her er en liste over vanlige arrangementer i React
1. onClick
: Denne hendelsen oppstår når et element klikkes.
Eksempel:
2. onChange
: Denne hendelsen oppstår når verdien til et inngangselement(input, select, textarea) endres.
Eksempel:
3. onSubmit
: Denne hendelsen inntreffer når et skjema sendes inn. Eksempel:
4. onMouseEnter
: Denne hendelsen oppstår når musepekeren går inn i et element.
Eksempel:
5. onMouseLeave
: Denne hendelsen oppstår når musepekeren forlater et element.
Eksempel:
6. onKeyDown
: Denne hendelsen oppstår når en tast trykkes ned.
Eksempel:
7. onKeyUp
: Denne hendelsen oppstår når en tast slippes.
Eksempel:
8. onFocus
: Denne hendelsen oppstår når et element får fokus.
Eksempel:
9. onBlur
: Denne hendelsen oppstår når et element mister fokus.
Eksempel:
10. onScroll
: Denne hendelsen oppstår når et element rulles.
Eksempel:
Dette er bare noen eksempler på vanlige hendelser i React. Du kan bruke disse hendelsene eller lage tilpassede hendelser i henhold til dine behov i React applikasjonen din.