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.