La gestione degli eventi consente di rendere interattivo il componente React, rispondendo alle azioni dell'utente e aggiornando l'interfaccia grafica di conseguenza, agendo sullo stato del componente stesso.
Lo stato è rappresentato da un oggetto accessibile nel codice del componente tramite la proprietà state che può essere inizializzato a proprio piacimento; a differenza di quanto avviene con le proprietà, fornite dall'oggetto props, lo stato può essere variato chiamando il metodo setState().
A fronte di una variazione dello stato, generalmente tramite la gestione di un evento che si verifica a seguito di un'azione dell'utente, React invoca la funzione render() e verifica la necessità di apportare modifiche alla parte del DOM che costituisce la rappresentazione del componente all'interno della pagina Web.
Per calarci nella pratica, immaginiamo di costruire un componente React che riproduce una versione estremamente "minimal" del pulsante "Mi piace" di Facebook. Esso sarà costituito da un link che invita l'utente a fare clic per mettere il proprio like; una volta fatto clic, il link sarà sostituito da un testo che suggerirà il buon fine dell'operazione.
Creiamo quindi la pagina Web e la struttura fondamentale del componente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Event Demo</title>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<script type="text/babel">
var LikeButton = React.createClass({
});
ReactDOM.render(<LikeButton />, document.body);
</script>
</body>
</html>Il primo passo da fare è definire lo stato iniziale del componente, implementando la funzione getInitialState():
var LikeButton = React.createClass({
getInitialState: function() {
return { liked: false };
}
});La funzione getInitialState() ha la responsabilità di restituire un oggetto JavaScript che contiene lo stato iniziale del componente; nell'oggetto possiamo inserire tutte le proprietà che vogliamo a seconda dei requisiti del componente che vogliamo realizzare.
Nell'esempio, l'oggetto che rappresenta lo stato contiene una proprietà liked che indica se l'utente ha messo "Mi piace" ed è impostata inizialmente con il valore booleano false, poiché non abbiamo ancora espresso la nostra preferenza cliccando sul link.
Il secondo passo è quello di definire la funzione render() per definire la rappresentazione del componente nella pagina. Come anticipato, dovremo mostrare un link per consentire all'utente di esprimere la propria approvazione, oppure un testo se questa è stata già data: questa informazione andremo a leggerla dal campo liked dell'oggetto che contiene lo stato, accessibile tramite la proprietà state.
Ecco il codice del componente aggiornato:
var LikeButton = React.createClass({
getInitialState: function() {
return { liked: false };
},
render: function() {
if (this.state.liked)
return <div>Ti piace!</div>
else
return <a href="#">Mi piace</a>
}
});Per dare vita al nostro componente manca solamente una cosa: intercettare il click dell'utente sul link "Mi piace" e modificare di conseguenza lo stato del componente commutando la proprietà liked. React se ne accorgerà e si farà carico di aggiornare automaticamente la rappresentazione visuale agendo sul DOM nel modo più efficiente possibile.
Per ultimare il nostro esempio, sarà sufficiente introdurre nel componente una nuova funzione – che chiameremo doLike() - la quale richiamerà il metodo setState() per aggiornare lo stato del componente; la funzione sarà agganciata all'evento OnClick dell'elemento <a>.
Ecco il codice aggiornato dell'esempio:
var LikeButton = React.createClass({
getInitialState: function() {
return { liked: false };
},
render: function() {
if (this.state.liked)
return <div>Ti piace!</div>
else
return <a href="#" onClick={this.doLike}>Mi piace</a>
},
doLike: function() {
this.setState({ liked: true });
}
});Riepilogando, il metodo setState() permette di passare un oggetto al componente React con l'obiettivo di specificare quali proprietà dello stato hanno subito un cambiamento: nel nostro caso, il flag liked è stato impostato al valore true. Quando lo stato cambia, React chiama nuovamente il metodo render() per ottenere la rappresentazione aggiornata del contenuto che terrà conto dello stato attuale.