Vediamo come gestire gli
eventi in
React partendo da un esempio che cambia la label di un bottone (toggle) ogni volta che viene cliccato:
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')
);
La prima cosa da notare è l'associazione con l'evento che avviene nel
costruttore attraverso la sintassi:
// 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:
//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
onClickLe 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:
{ 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:
{ this.state.isToggleOn ? <strong>Acceso</strong> : <span>spento</span> }
Vedi anche
React come funziona - Caricare i dati da una API e
Handling Events