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:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
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:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
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:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
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:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>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:
<button onClick={handleClick}>Click Here</button> 2. onChange: Kjo ngjarje ndodh kur vlera e një elementi hyrës(hyrje, përzgjedhje, zona e tekstit) ndryshon.
Shembull:
<input type="text" onChange={handleChange} /> 3. onSubmit: Kjo ngjarje ndodh kur dorëzohet një formular. Shembull:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Kjo ngjarje ndodh kur treguesi i miut fut në një element.
Shembull:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Kjo ngjarje ndodh kur treguesi i miut largohet nga një element.
Shembull:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Kjo ngjarje ndodh kur shtypet një tast.
Shembull:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Kjo ngjarje ndodh kur lëshohet një çelës.
Shembull:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Kjo ngjarje ndodh kur një element merr fokus.
Shembull:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Kjo ngjarje ndodh kur një element humb fokusin.
Shembull:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Kjo ngjarje ndodh kur një element lëviz.
Shembull:
<div onScroll={handleScroll}>Scrollable Content</div>
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.