React come funziona - Gestire gli eventi
18 luglio 2017
Vediamo come gestire gli eventi in React partendo da un esempio che cambia la label di un bottone (toggle) ogni volta che viene cliccato:
a differenza di JavaScript in cui l'evento è passato come stringa, in JSX, viene passata direttamente la funzione.
Le cose di cui ricordarsi sono:
Questo è l'esempio funzionante:
Va notato anche come visualizzare o meno un elemento nel DOM:
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:
Vedi anche React come funziona - Caricare i dati da una API e Handling Events
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}
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