Události hrají zásadní roli při vytváření interaktivních a dynamických uživatelských rozhraní v React. V tomto tutoriálu prozkoumáme, jak zacházet s událostmi React a efektivně reagovat na akce uživatelů.
Zpracování událostí v JSX
React poskytuje systém syntetických událostí, který obaluje nativní události prohlížeče a normalizuje je v různých prohlížečích. Obsluhy událostí můžeme připojit přímo k prvkům JSX pomocí onEventName atributu.
Příklad:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Obslužné rutiny událostí a objekty událostí
Když je událost spuštěna, React automaticky předá objekt události funkci obsluhy události. K tomuto objektu můžeme přistupovat, abychom získali další informace o události, jako je cílový prvek, souřadnice myši atd.
Příklad:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Závazné obslužné rutiny událostí
Při předávání obslužných rutin událostí jako rekvizit je důležité je svázat s instancí komponenty. this To zajišťuje, že při spuštění události je zachován správný kontext.
Příklad:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Šíření událostí a zabránění výchozím akcím
React používá systém syntetických událostí, který automaticky zpracovává šíření událostí. Abychom zabránili výchozímu chování prohlížeče, jako je odesílání formuláře nebo navigace odkazem, můžeme metodu zavolat event.preventDefault().
Příklad:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Když pochopíte, jak zacházet s událostmi v React, můžete vytvořit interaktivní a citlivá uživatelská rozhraní, která hladce reagují na akce uživatele
Zde je seznam běžných akcí v React
1. onClick: Tato událost nastane, když se klikne na prvek.
Příklad:
<button onClick={handleClick}>Click Here</button> 2. onChange: Tato událost nastane, když se změní hodnota vstupního prvku(input, select, textarea).
Příklad:
<input type="text" onChange={handleChange} /> 3. onSubmit: Tato událost nastane při odeslání formuláře. Příklad:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Tato událost nastane, když ukazatel myši vstoupí do prvku.
Příklad:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Tato událost nastane, když ukazatel myši opustí prvek.
Příklad:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Tato událost nastane, když je stisknuto tlačítko.
Příklad:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Tato událost nastane po uvolnění klávesy.
Příklad:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Tato událost nastane, když prvek získá fokus.
Příklad:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Tato událost nastane, když prvek ztratí fokus.
Příklad:
<input type="text" onBlur={handleBlur} /> 10. onScroll: K této události dochází při rolování prvku.
Příklad:
<div onScroll={handleScroll}>Scrollable Content</div>
Toto jsou jen některé příklady běžných událostí v React. Tyto události můžete použít nebo vytvořit vlastní události podle vašich potřeb ve vaší React aplikaci.