Gestione degli Eventi in React

Gestione degli Eventi

La gestione degli eventi negli elementi React è simile alla gestione degli eventi negli elementi DOM ma vi sono alcune differenze sintattiche:

• React usa la notazione camelCase per i nomi degli eventi (onClick, onKeyDown, onKeyPress ecc…)  anziché in minuscolo (onclick, onkeydown, etc).
• Il gestore di eventi (event handler) viene passato come funzione, piuttosto che stringa.

Per esempio, in HTML, si ha:

<button onclick="handleClick()">
  Attiva Lasers
</button>

Mentre con React diventa:

<button onClick={handleClick}>
  Attiva Lasers
</button>

Vediamo un esempio completo:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log("Pulsante premuto - Evento click");
  }
  render() {
    return (
      /* passiamo un riferimento al metodo handleClick */
      <button onClick={this.handleClick} >Pulsante</button>
    )
  }
}

Cliccando sul pulsante viene stampato un messaggio nella console.

In realtà React passa implicitamente alla funzione handleClick() un argomento che è un’istanza di SyntheticEvent, un wrapper cross-browser dell’ oggetto Evento nativo del browser. Questo oggetto ci nasconde le peculiarità dei diversi browser. 

Quindi l’esempio diventa:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(e) {
    console.log(`Pulsante premuto - Evento ${e.type}`);
  }
  render() {
    return (
      /* passiamo un riferimento al metodo handleClick */
      <button onClick={this.handleClick} >Pulsante</button>
    )
  }
}