Úvod
Události obvykle představují určitý typ interakce mezi uživatelem a aplikací – kdykoli uživatel klikne na objekt, zadá text do vstupního pole, přetáhne nebo pustí nějaký prvek a tak dále. Každá událost proto obvykle vyžaduje určitý typ reakce z aplikace. Pokaždé, když nastane významná událost, můžeme jako programátoři definovat funkci, která se použije k reakci na nastalou událost. Tyto funkce se nazývají obslužné rutiny událostí a jsou jádrem správy událostí v jakémkoli programovacím jazyce. Správa událostí je soubor technik používaných k zpracování události.
Rozdíly mezi DOM a React Event Handling
Pokud používáte React, pravděpodobně již znáte události DOM v JavaScriptu:
<!- JavaScript event ->
<button onclick="handleClick()">
Trigger Function
</button>
Toto je onclick Událost DOM. Po kliknutí na tlačítko tohoto příkladu handleClick() funkce se nazývá - to je základní princip správy událostí. Tato základní myšlenka je sdílena mezi JavaScriptem a Reactem, ale existuje několik nuancí, které je odlišují.
Za prvé je zde drobný rozdíl v pojmenování události – React používá velbloudí případ jména namísto malých písmen jména používaná JavaScriptem. Po rychlém zhlédnutí předchozího příkladu si všimnete, že název události je onclick a alternativou React je onClick . Kromě toho React využívá JSX (JavaScript XML) , což nám umožňuje předat funkci jako obsluhu události (uvnitř složených závorek) místo řetězce:
<!- React event ->
<button onClick={handleClick}>
Trigger Function
</button>
Všimněte si, že jsme nevolali handleClick funkce uvnitř složených závorek - volá ji pomocí {handleClick()} bude volat funkci handleru pokaždé, když je prvek vykreslen. Syntaxe, kterou jsme použili, zajišťuje volání funkce handleru pouze tehdy, když je událost registrována.
Často se dostanete do situace, kdy chcete zabránit výchozímu chování po zaregistrování události. Například onsubmit Událost JavaScript se zaregistruje poté, co uživatel klikne na tlačítko Odeslat. Výchozím chováním je správné odeslání dat formuláře a opětovné načtení webové stránky, ale možná budeme muset opětovnému načtení stránky zabránit. JavaScript má v rukávu šikovný trik, jak zabránit výchozímu chování:
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>
Funkci handleru jsme definovali obvyklým způsobem, ale všimněte si, jak jsme přidali return false po definici funkce handleru. To je způsob, jakým vývojáři JavaScriptu brání výchozímu chování při zpracování událostí. Pokud nezadáte return false po obslužné funkci v tomto příkladu se stránka znovu načte dříve, než konzole vůbec dostane příležitost zprávu zaprotokolovat.
Poznámka: Funkce obsluhy události může být definována v souboru JavaScript a volána v HTML, když je detekována událost. Alternativně můžete také definovat a volat funkci handler přímo v HTML kódu (jak můžete vidět v příkladu výše).
React tento trik prostě nepodporuje! Chcete-li zabránit výchozímu chování v Reactu, musíte explicitně zavolat preventDefault :
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log("You clicked submit.");
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
Možná to není tak jednoduché jako zpracování událostí v JavaScriptu, ale rozhodně je to robustnější způsob zpracování událostí. Tento příklad ilustruje zpracování událostí při použití s funkční komponentou v Reactu. Jednoduše jsme v komponentě deklarovali funkci handleru a zavolali ji v rámci return() metoda.
Poznámka: React se stará o kompatibilitu mezi prohlížeči, takže si s tím nemusíte dělat starosti!
Zpracování událostí ve funkčních komponentách
Obsluha události je předána jako atribut prvku nebo komponentě ve funkční komponentě. Když uživatel interaguje s prvkem, tento atribut obdrží funkci, která popisuje, co se stane.
Obsluha onClick Událost
Pokud uživatel klikne na prvek vícekrát, zobrazí se onClick událost je spuštěna a funkce je volána vícekrát, stejně jako jakákoli jiná událost. Podívejme se, jak to vypadá v praxi, vytvořili bychom tlačítko a zavolali funkci:
const App = () => {
const handleClick = () => {
console.log("This function has been triggered!");
};
return (
<div className="App">
<h1>Hello World</h1>
<button onClick={handleClick}>Trigger Function</button>
</div>
);
};
Tím se odhlásí „Tato funkce byla spuštěna!“ v konzole.
Předávání parametrů do událostí
Pokud chceme předávat parametry nebo hodnoty funkci, která je spouštěna, musíme použít funkci šipky nebo skutečnou funkci. V našem případě řekněme, že chceme funkci předat hodnotu a poté ji přihlásit do konzole:
const App = () => {
const handleClick = (name) => {
console.log("My Name is:", name);
};
return (
<div className="App">
<h1>Hello World</h1>
<button onClick={() => handleClick("John Doe")}>
Trigger Function
</button>
</div>
);
};
Zobrazí se „Jmenuji se:John Doe “ v konzole. Můžeme také použít skutečnou funkci pomocí klíčového slova function a vše bude stále fungovat perfektně:
<button onClick={function(){handleClick('John Doe')}}>Trigger Function</button>
Zpracování onSubmit Událost
Můžeme také zpracovat události odeslání formuláře pomocí funkce React, když uživatel klikne na tlačítko odeslání nebo klepne na klávesu Enter na klávesnici. Toto je řešeno podobně jako onClick událost:
const App = () => {
const handleSubmit = () => {
console.log("The submit button was clicked!");
};
return (
<div className="App">
<h1>Hello World</h1>
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" />
<button type="submit">Submit</button>
</form>
</div>
);
};
„Bylo kliknuto na tlačítko Odeslat! " bude v důsledku toho odhlášen. Protože se však prohlížeč okamžitě znovu načte, použijeme preventDefault() způsob, jak zabránit prohlížeči v provedení výchozí akce.
const handleSubmit = (e) => {
e.preventDefault();
console.log("The submit button was clicked!");
};
Zpracování událostí v komponentách třídy
Komponenty třídy zpracovávají události podobně jako funkční komponenty s několika drobnými rozdíly. Vytvořme tlačítko, které volá handleClick funkce po kliknutí:
class App extends React.Component {
handleClick = () => {
console.log("This function has been triggered!");
};
render() {
return (
<div className="App">
<h1>Hello World</h1>
<button onClick={this.handleClick}>Trigger Function</button>
</div>
);
}
}
Zdarma e-kniha:Git Essentials
Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!
Poznámka: Musíme použít this klíčové slovo, protože jsme v App třída a handleClick je jednou z členských funkcí této třídy.
Předávání parametrů do událostí
Nejlepší je deklarovat funkci handleru jako metodu v rámci komponenty třídy. Pokud chcete parametry, rekvizity nebo stavy předat vykreslené komponentě později, musíte funkci zpracování událostí svázat s this uvnitř konstruktoru.
Řekněme, že máme nastavenou hodnotu stavu, kterou chceme změnit, když se klikne na konkrétní tlačítko, a chceme použít předaný parametr, měli bychom něco takového, ale vyvolalo by to chybu :
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "Welcome, We are glad you are here!"
};
}
handleClick = (name) => {
console.log("This function has been triggered!", name);
this.setState({
title: `Hello ${name}!`
});
};
render() {
return (
<div className="App">
<h1>{this.state.title}</h1>
<button onClick={this.handleClick("Joel")}>
Trigger Function
</button>
</div>
);
}
}
K vyřešení problému buď použijeme funkce šipek nebo Function.prototype.bind] svázat this klíčové slovo:
<button onClick={() => this.handleClick("John Doe")}>Trigger Function</button>
<button onClick={this.handleClick.bind(this, "John Doe")}>Trigger Function</button>
Zpracování onSubmit Událost
Můžeme také zpracovat všechny typy událostí pomocí komponent třídy, pokud použijeme this klíčové slovo místo funkce při deklaraci metod:
class App extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
console.log("The submit button was clicked!");
};
render() {
return (
<div className="App">
<h1>Hello World</h1>
<form onSubmit={this.handleSubmit}>
<label>Name</label>
<input type="text" />
<button type="submit">Submit</button>
</form>
</div>
);
}
}
Závěr
V této příručce jsme viděli, že události React jsou velmi podobné událostem JavaScriptu, s několika rozdíly v syntaxi a chování při šíření. Také jsme se naučili rozdíl mezi obslužnými rutinami událostí používanými ve funkčních a třídních komponentách, přičemž komponenta třídy vyžaduje vazbu obslužných rutin na this . V Reactu lze zpracovat mnohem více událostí, ale všechny fungují stejným způsobem jako onClick ať už ve funkcionální nebo třídní komponentě.