React come funziona - Gestire gli eventi

Vediamo come gestire gli eventi in React partendo da un esempio che cambia la label di un bottone (toggle) ogni volta che viene cliccato:

React JSX

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true,
      clickCount: 0
    };

    // questa associazione è necessaria per avere 'this' valorizzato nell'evento
    this.handleClick = this.handleClick.bind(this);
  }

  // gestore dell'evento
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn,
      clickCount: ++prevState.clickCount,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON 1' : 'OFF 0'}
        </button>
        { this.state.isToggleOn && <strong style={ { color:'green', marginLeft:'10px' } }>Acceso</strong> }
        <span style={ { color:'#ccc', marginLeft:'10px' } }>click count {this.state.clickCount}</span>
      </div>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
per funzionare deve essere utilizzata la base html dell'esempio precedente
La prima cosa da notare è l'associazione con l'evento che avviene nel costruttore attraverso la sintassi:

React JSX

// this.nomeDellEventoEsposto = this.funzioneGestoreDellEvento.bind(this)
this.handleClick = this.handleClick.bind(this);
bind(this) è necessario per avere il contesto dell'componente nel gestore dell'evento
L'evento può essere associato al tag html attraverso questa sintassi:

React JSX

//nomeEventoHtml={this.gestoreEvento}
onClick={this.handleClick}
a differenza di JavaScript in cui l'evento è passato come stringa, in JSX, viene passata direttamente la funzione.
Fate attenzione a non assegnare l'evento con le parentesi this.gestoreEvento(), è un errore, in quanto provoca l'esecuzione immediata dell'evento durante il rendering del componente, va passato solo il riferimento this.gestoreEvento senza parentesi.
Tutti gli eventi devono essere scritti in camelCase, quindi, ad esempio, onclick diventa onClick

Le cose di cui ricordarsi sono:
  • l'evento va dichiarato nel costruttore con questa sintassi: this.nomeDellEventoEsposto = this.[funzioneGestoreDellEvento.bind(this)
  • per associare l'evento al tag html la sintassi da usare è: nomeEventoHtml={this.gestoreEvento}
  • il gestore dell'evento (handleClick in questo caso) deve aggiornare lo stato tramite this.setState

Questo è l'esempio funzionante:

Va notato anche come visualizzare o meno un elemento nel DOM:

React JSX

{ this.state.isToggleOn && <strong style={ { color:'green', marginLeft:'10px' } }>Acceso</strong> }
  • si usa la sintassi { condizione && markupJsx } per visualizzare o meno un elemento
  • per l'inserimento di stili in linea sul componente si usa style={ oggetto }
  • l'oggetto passato allo stile deve avere le proprietà in camelCase senza l'eventuale simbolo - (meno), mentre le proprietà vanno passate come stringhe

Posso anche utilizzare l'operatore ternario per visualizzare un elemento in alternativa ad un altro con la sintassi
{ condizione ? markupJsx_True : markupJsx_False }
ad esempio:

React JSX

{  this.state.isToggleOn ? <strong>Acceso</strong> : <span>spento</span> }

Vedi anche React come funziona - Caricare i dati da una API e Handling Events
Tags:
Esempi225 HTML 554 JavaScript184 React17 SPFx17 XML / XSL / XSLT29
Potrebbe interessarti anche: