Obsługa zdarzeń w JSX

Przeanalizujmy teraz obsługę zdarzeń w React. Na przykład, sprawmy, aby po kliknięciu w blok wyświetlał się alert z pewnym tekstem.

Załóżmy, że mamy funkcję showMess, która wyświetla alert z komunikatem, a w kodzie HTML znajduje się przycisk, po kliknięciu którego chcielibyśmy zobaczyć ten alert:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Przypiszmy do naszego przycisku zdarzenie onclick tak, aby po kliknięciu w ten div uruchamiała się funkcja showMess. Aby to zrobić, należy dodać atrybut onClick (właśnie w camelCase, czyli onClick, a nie onclick), a w nim określić funkcję, która zostanie wykonana w ramach tego zdarzenia:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

W ten sposób odbywa się praca ze zdarzeniami: dodawany jest atrybut (na przykład onClick lub onFocus), a jako wartość atrybutu określa się metodę, która zostanie wywołana w ramach tego zdarzenia.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}