Qualunque sia il framework che usiamo per creare applicazioni, la gestione di una form in HTML passa attraverso l'uso di una serie di componenti predefiniti come input, select, textarea. Fatta eccezione per il tag input con l'attributo type impostato su file, quest componenti vengono definiti controlled component in quanto mantengono internamente il loro stato e permettono di leggerlo e impostarlo tramite codice.
Quando un controlled component cambia il proprio stato a seguito di un'interazione dell'utente, è nostro compito intercettare il nuovo stato e salvarlo nello stato del componente. Allo stesso modo, quando il valore nello stato del componente cambia, è nostro compito modificare lo stato del controlled component.
Nel prossimo esempio mettiamo in pratica quanto detto.

class MyFormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  handleChange(event) {
    this.setState({ text: event.target.value });
  }

  handleSubmit(event) {
    alert('submitted');
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <input type="text" value={this.state.text} onChange={this.handleChange.bind(this)}/>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

In questo esempio, abbiamo una form al cui submit (onSubmit) viene invocato il metodo handleSubmit. all'interno della form c'è un tag input che rappresenta il nostro controlled component e al cui cambio (onChange) invochiamo il metodo handleChange (che modifica lo stato del componente col nuovo valore). Al tempo stesso, mettiamo in binding lo stato dell'input con lo stato del component.
In questo caso abbiamo visto il tag input, ma anche i tag select e textarea sfruttano esattamente lo stesso evento (onchange) e la stessa proprietà (value) per sincronizzarsi con lo stato del component.
Quando abbiamo molti controlled component, la quantità di codice da scrivere diventa notevole. Nel prossimo script vedremo come diminuire il codice da scrivere.