Rukovanje događajima u React- Opsežan vodič za rukovanje događajima u React .js

Događaji igraju ključnu ulogu u stvaranju interaktivnih i dinamičnih korisničkih sučelja u React. U ovom vodiču istražit ćemo kako učinkovito rukovati događajima React i odgovoriti na radnje korisnika.

 

Rukovanje događajima u JSX-u

React pruža sintetički sustav događaja koji obavija izvorne događaje preglednika i normalizira ih u različitim preglednicima. Rukovatelje događajima možemo priložiti izravno na JSX elemente pomoću onEventName atributa.

Primjer:

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

 

Rukovatelji događajima i objekti događaja

Kada se događaj pokrene, React automatski prosljeđuje objekt događaja funkciji rukovatelja događajima. Možemo pristupiti ovom objektu kako bismo dobili dodatne informacije o događaju, kao što su ciljni element, koordinate miša itd.

Primjer:

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

 

Obvezujući rukovatelji događajima

Prilikom prosljeđivanja rukovatelja događajima kao rekvizita, važno ih je povezati s instancom komponente. Ovo osigurava održavanje ispravnog this konteksta kada se događaj pokrene.

Primjer:

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

 

Širenje događaja i sprječavanje zadanih radnji

React koristi sintetički sustav događaja koji automatski upravlja širenjem događaja. Kako bismo spriječili zadano ponašanje preglednika, kao što je slanje obrasca ili navigacija vezama, možemo pozvati metodu event.preventDefault().

Primjer:

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

Razumijevanjem načina rukovanja događajima u React, možete stvoriti interaktivna i responzivna korisnička sučelja koja neprimjetno reagiraju na radnje korisnika

 

Ovdje je popis uobičajenih događaja u React

1. onClick: Ovaj događaj se događa kada se klikne na element.

Primjer:

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

2. onChange: Ovaj se događaj događa kada se promijeni vrijednost ulaznog elementa(unos, odabir, tekstualno područje).

Primjer:

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

3. onSubmit: Ovaj događaj se događa kada se obrazac pošalje. Primjer:

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

4. onMouseEnter: Ovaj događaj se događa kada pokazivač miša uđe u element.

Primjer:

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

5. onMouseLeave: Ovaj događaj se događa kada pokazivač miša napusti element.

Primjer:

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

6. onKeyDown: Ovaj događaj se događa kada se tipka pritisne.

Primjer:

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

7. onKeyUp: Ovaj događaj se događa kada se tipka otpusti.

Primjer:

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

8. onFocus: Ovaj događaj se događa kada element dobije fokus.

Primjer:

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

9. onBlur: Ovaj događaj se događa kada element izgubi fokus.

Primjer:

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

10. onScroll: Ovaj događaj se događa kada se element pomiče.

Primjer:

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

 

Ovo su samo neki primjeri uobičajenih događaja u React. Možete koristiti te događaje ili kreirati prilagođene događaje prema svojim potrebama u svojoj React aplikaciji.