Aggiunta di eventi in JSX

Ora studiamo come lavorare con gli eventi in React. Ad esempio, facciamo in modo che cliccando su un blocco venga visualizzato un alert con un certo testo.

Supponiamo di avere una funzione showMess, che visualizza un alert con un messaggio, e nel codice HTML abbiamo un pulsante, sul cui click vorremmo vedere questo alert:

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

Colleghiamo al nostro pulsante l'evento onclick in modo che cliccando su questo div venga eseguita la funzione showMess. Per fare questo è necessario aggiungere l'attributo onClick (proprio in camelCase, cioè onClick, e non onclick), e in esso specificare la funzione che verrà eseguita per questo evento:

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

Ed è così che funziona la gestione degli eventi: si aggiunge un attributo (ad esempio, onClick o onFocus), come valore dell'attributo si specifica il metodo che verrà chiamato per quell'evento.

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