Obsługa zdarzeń

W React, obsługa zdarzeń jest realizowana przez specjalne właściwości, znane jako propsy, takie jak onClick dla zdarzeń kliknięcia. Te właściwości są przypisywane do komponentów i przyjmują funkcję, która zostanie wywołana w momencie wystąpienia zdarzenia. Ta metoda jest podobna do użycia addEventListener w czystym JavaScript, gdzie zdarzenie kliknięcia obsługujemy przez addEventListener('click', ...). W React jednak używamy onClick={...}. W React zdarzenia są nazwane zgodnie z konwencją camelCase i zawsze poprzedzone są przedrostkiem on.

Przykład:

function MyButton() {
  function handleClick() {
    alert('Kliknięto przycisk!');
  }

  return <button onClick={handleClick}>Kliknij mnie</button>;
}

Aby obsłużyć zdarzenie w sposób umożliwiający przekazanie dodatkowych argumentów do funkcji, można zastosować poniższe podejście:

function ItemList({ items }) {

  const handleItemClick = (itemId, event) => {
    event.preventDefault();
    alert(`Kliknięto element z ID: ${itemId}`);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.name}
          <button onClick={(e) => handleItemClick(item.id, e)}>Kliknij mnie</button>
        </li>
      ))}
    </ul>
  );
}

Obsługa wielu zdarzeń

Możliwe jest również łatwe obsługiwane wielu zdarzeń na pojedynczym elemencie poprzez zdefiniowanie różnych zdarzeń jako atrybutów tego elementu:

function MyComponent() {
  return (
    <div
      onClick={() => console.log('Klik!')}
      onMouseOver={() => console.log('Najechano!')}
    >
      Najedź i kliknij
    </div>
  );
}

Obiekt event

W czystym JavaScript, obiekt event jest automatycznie przekazywany do funkcji obsługującej zdarzenie jako jej pierwszy argument, gdy zdarzenie występuje. Dostarcza on szczegółowych informacji o zdarzeniu, które zostało wywołane. Na przykład, przy obsłudze zdarzenia kliknięcia (click), obiekt event może dostarczać informacje o pozycji kursora myszy w momencie kliknięcia.

React także przekazuje obiekt event do funkcji obsługującej zdarzenie, ale w formie „Syntetycznego Zdarzenia” (SyntheticEvent). Syntetyczne Zdarzenia to opakowania dla natywnych zdarzeń przeglądarki, zaprojektowane aby zapewnić spójne API zdarzeń w różnych przeglądarkach. Tak jak w czystym JavaScript, możemy użyć event.preventDefault() do zapobiegania domyślnej akcji zdarzenia.

function MyButton() {
  const handleClick = (event) => {
    console.log(event.type); // "click"
    event.preventDefault(); // Zapobiega domyślnej akcji (np. wysłaniu formularza)
  };
  return <button onClick={handleClick}>Kliknij mnie</button>;
}