Gestionarea evenimentelor în React- Un ghid cuprinzător pentru gestionarea evenimentelor în React .js

Evenimentele joacă un rol vital în crearea interfețelor utilizator interactive și dinamice în React. În acest tutorial, vom explora cum să gestionăm evenimentele React și să răspundem la acțiunile utilizatorului în mod eficient.

Gestionarea evenimentelor în JSX

React oferă un sistem de evenimente sintetice care include evenimentele browserului nativ și le normalizează în diferite browsere. Putem atașa handlere de evenimente direct la elementele JSX folosind onEventName atributul.

Exemplu:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

Manipulatori de evenimente și obiecte de evenimente

Când un eveniment este declanșat, React trece automat un obiect eveniment la funcția de gestionare a evenimentelor. Putem accesa acest obiect pentru a obține informații suplimentare despre eveniment, cum ar fi elementul țintă, coordonatele mouse-ului etc.

Exemplu:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

Manageri de evenimente obligatorii

Când treceți handlerele de evenimente ca elemente de recuzită, este important să le legați la instanța componentei. Acest lucru asigură this menținerea contextului corect atunci când evenimentul este declanșat.

Exemplu:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

Propagarea evenimentelor și prevenirea acțiunilor implicite

React utilizează un sistem de evenimente sintetice care se ocupă automat de propagarea evenimentelor. Pentru a preveni comportamentul implicit al browserului, cum ar fi trimiterea formularelor sau navigarea prin linkuri, putem apela event.preventDefault() metoda.

Exemplu:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

Înțelegând cum să gestionați evenimentele în React, puteți crea interfețe de utilizator interactive și receptive, care răspund perfect la acțiunile utilizatorului

Iată o listă cu evenimente comune în React

1. onClick: Acest eveniment are loc atunci când se face clic pe un element.

Exemplu:

<button onClick={handleClick}>Click Here</button>

2. onChange: Acest eveniment are loc atunci când valoarea unui element de intrare(input, select, textarea) se modifică.

Exemplu:

<input type="text" onChange={handleChange} />

3. onSubmit: Acest eveniment are loc atunci când este trimis un formular. Exemplu:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4. onMouseEnter: Acest eveniment are loc când indicatorul mouse-ului intră într-un element.

Exemplu:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5. onMouseLeave: Acest eveniment are loc când indicatorul mouse-ului părăsește un element.

Exemplu:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6. onKeyDown: Acest eveniment are loc atunci când o tastă este apăsată.

Exemplu:

<input type="text" onKeyDown={handleKeyDown} />

7. onKeyUp: Acest eveniment are loc atunci când o tastă este eliberată.

Exemplu:

<input type="text" onKeyUp={handleKeyUp} />

8. onFocus: Acest eveniment are loc atunci când un element primește focus.

Exemplu:

<input type="text" onFocus={handleFocus} />

9. onBlur: Acest eveniment are loc atunci când un element își pierde focalizarea.

Exemplu:

<input type="text" onBlur={handleBlur} />

10. onScroll: Acest eveniment are loc atunci când un element este derulat.

Exemplu:

<div onScroll={handleScroll}>Scrollable Content</div>

Acestea sunt doar câteva exemple de evenimente comune în React. Puteți utiliza aceste evenimente sau puteți crea evenimente personalizate în funcție de nevoile dvs. din React aplicația dvs.