Reagovat Události


Stejně jako události HTML DOM může React provádět akce založené na uživatelských událostech.

React má stejné události jako HTML: kliknutí, změna, přejetí myší atd.


Přidávání událostí

Události React jsou zapsány v syntaxi camelCase:

onClick místo onclick.

Obslužné rutiny událostí React jsou napsány ve složených závorkách:

onClick={shoot}  místo onClick="shoot()".

Reagovat:

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

Příklad:

Vložte shootfunkci do Footballkomponenty:

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));


w3schools CERTIFIED . 2022

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

Předávání argumentů

Chcete-li předat argument obsluze události, použijte funkci šipky.

Příklad:

Poslat "Gól!" jako parametr shoot funkce pomocí funkce šipky:

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));


Reagovat objekt události

Obslužné rutiny událostí mají přístup k události React, která spustila funkci.

V našem příkladu je událostí událost „kliknutí“.

Příklad:

Funkce šipky: Ruční odeslání objektu události:

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));

To se bude hodit, když se podíváme na Formulář v další kapitole.


Otestujte se pomocí cvičení

Cvičení:

Chcete-li zahrnout obslužnou rutinu události kliknutí, vyplňte toto prohlášení.

<button ={clicked()}>Click Me!</button>