Atasarea evenimentelor în JSX

Să studiem acum lucrul cu evenimentele în React. De exemplu, să facem astfel încât la clic pe un bloc să se afișeze un alert cu un anumit text.

Să presupunem că avem funcția showMess, care afișează un alert cu un mesaj, iar în codul HTML există un buton, pe care la clic am dori să vedem acest alert:

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

Să asociem butonului nostru evenimentul onclick astfel încât la clic pe acest div să se execute funcția showMess. Pentru aceasta trebuie adăugat atributul onClick (exact în camelCase, adică onClick, nu onclick), iar în el să se indice funcția care se va executa la acest eveniment:

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

Astfel se întâmplă lucrul cu evenimentele: se adaugă un atribut (de exemplu, onClick sau onFocus), ca valoare a atributului se indică metoda care va fi apelată la acest eveniment.

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