Ngjarjet luajnë një rol jetik në krijimin e ndërfaqeve interaktive dhe dinamike të përdoruesit në React. Në këtë tutorial, ne do të shqyrtojmë se si t'i trajtojmë ngjarjet React dhe t'u përgjigjemi në mënyrë efektive veprimeve të përdoruesit.
Trajtimi i ngjarjeve në JSX
React ofron një sistem ngjarjesh sintetike që mbështjell ngjarjet e shfletuesit vendas dhe i normalizon ato nëpër shfletues të ndryshëm. Ne mund t'i bashkojmë mbajtësit e ngjarjeve drejtpërdrejt në elementët JSX duke përdorur onEventName
atributin.
Shembull:
Trajtuesit e ngjarjeve dhe objektet e ngjarjeve
Kur aktivizohet një ngjarje, React automatikisht kalon një objekt ngjarje në funksionin e mbajtësit të ngjarjeve. Ne mund t'i qasemi këtij objekti për të marrë informacion shtesë rreth ngjarjes, si elementi i synuar, koordinatat e miut, etj.
Shembull:
Trajtuesit e ngjarjeve të detyrueshme
Kur kaloni mbajtësit e ngjarjeve si mbështetës, është e rëndësishme t'i lidhni ato me shembullin e komponentit. Kjo siguron që this
konteksti i saktë të ruhet kur aktivizohet ngjarja.
Shembull:
Përhapja e ngjarjeve dhe parandalimi i veprimeve të paracaktuara
React përdor një sistem sintetik ngjarjesh që trajton automatikisht përhapjen e ngjarjeve. Për të parandaluar sjelljen e paracaktuar të shfletuesit, si p.sh. dorëzimi i formularit ose lundrimi i lidhjeve, ne mund ta thërrasim event.preventDefault()
metodën.
Shembull:
Duke kuptuar se si t'i trajtoni ngjarjet në React, ju mund të krijoni ndërfaqe përdoruesi interaktive dhe të përgjegjshme që u përgjigjen pa probleme veprimeve të përdoruesit
Këtu është një listë e ngjarjeve të zakonshme në React
1. onClick
: Kjo ngjarje ndodh kur klikohet një element.
Shembull:
2. onChange
: Kjo ngjarje ndodh kur vlera e një elementi hyrës(hyrje, përzgjedhje, zona e tekstit) ndryshon.
Shembull:
3. onSubmit
: Kjo ngjarje ndodh kur dorëzohet një formular. Shembull:
4. onMouseEnter
: Kjo ngjarje ndodh kur treguesi i miut fut në një element.
Shembull:
5. onMouseLeave
: Kjo ngjarje ndodh kur treguesi i miut largohet nga një element.
Shembull:
6. onKeyDown
: Kjo ngjarje ndodh kur shtypet një tast.
Shembull:
7. onKeyUp
: Kjo ngjarje ndodh kur lëshohet një çelës.
Shembull:
8. onFocus
: Kjo ngjarje ndodh kur një element merr fokus.
Shembull:
9. onBlur
: Kjo ngjarje ndodh kur një element humb fokusin.
Shembull:
10. onScroll
: Kjo ngjarje ndodh kur një element lëviz.
Shembull:
Këta janë vetëm disa shembuj të ngjarjeve të zakonshme në React. Ju mund t'i përdorni këto ngjarje ose të krijoni ngjarje të personalizuara sipas nevojave tuaja në React aplikacionin tuaj.