Zpracování událostí v React- Komplexní průvodce zpracováním událostí v React .js

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.