Események kezelése React – Átfogó útmutató az események kezeléséhez React .js

Az események létfontosságú szerepet játszanak az interaktív és dinamikus felhasználói felületek létrehozásában React. Ebben az oktatóanyagban megvizsgáljuk, hogyan kezeljük az eseményeket, React és hogyan reagáljunk hatékonyan a felhasználói műveletekre.

Eseménykezelés JSX-ben

React olyan szintetikus eseményrendszert biztosít, amely becsomagolja a natív böngészőeseményeket, és normalizálja azokat a különböző böngészőkben. Eseménykezelőket közvetlenül a JSX elemekhez csatolhatunk az onEventName attribútum segítségével.

Példa:

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

Eseménykezelők és eseményobjektumok

Egy esemény aktiválásakor React automatikusan átad egy eseményobjektumot az eseménykezelő funkciónak. Az objektumhoz hozzáférhetünk, hogy további információkat kapjunk az eseményről, például célelemet, egérkoordinátákat stb.

Példa:

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

Kötelező eseménykezelők

Amikor az eseménykezelőket kellékként adjuk át, fontos, hogy hozzárendeljük őket az összetevőpéldányhoz. Ez biztosítja, hogy a megfelelő this kontextus megmaradjon az esemény indításakor.

Példa:

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

Események terjesztése és az alapértelmezett műveletek megelőzése

React szintetikus eseményrendszert használ, amely automatikusan kezeli az események terjedését. A böngésző alapértelmezett viselkedésének, például az űrlapok beküldésének vagy a link-navigációnak megakadályozása érdekében meghívhatjuk a event.preventDefault() metódust.

Példa:

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

Az események kezelésének megértésével React interaktív és reszponzív felhasználói felületeket hozhat létre, amelyek zökkenőmentesen reagálnak a felhasználói műveletekre.

Itt található a gyakori események listája React

1. onClick: Ez az esemény akkor következik be, amikor egy elemre kattintanak.

Példa:

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

2. onChange: Ez az esemény akkor következik be, amikor egy bemeneti elem(input, select, textarea) értéke megváltozik.

Példa:

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

3. onSubmit: Ez az esemény egy űrlap elküldésekor következik be. Példa:

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

4. onMouseEnter: Ez az esemény akkor következik be, amikor az egérmutató belép egy elembe.

Példa:

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

5. onMouseLeave: Ez az esemény akkor következik be, amikor az egérmutató elhagy egy elemet.

Példa:

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

6. onKeyDown: Ez az esemény akkor következik be, amikor egy billentyűt lenyomnak.

Példa:

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

7. onKeyUp: Ez az esemény egy kulcs elengedésekor következik be.

Példa:

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

8. onFocus: Ez az esemény akkor következik be, amikor egy elem fókuszba kerül.

Példa:

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

9. onBlur: Ez az esemény akkor következik be, amikor egy elem elveszti a fókuszt.

Példa:

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

10. onScroll: Ez az esemény akkor következik be, amikor egy elemet görgetünk.

Példa:

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

Ez csak néhány példa a gyakori eseményekre Magyarországon React. Használhatja ezeket az eseményeket, vagy egyéni eseményeket hozhat létre az alkalmazásában igényeinek megfelelően React.