Forms

Gli elementi HTML form funzionano in un modo differente rispetto agli altri elementi DOM in React, la motivazione sta nel fatto che gli elementi form mantengono naturalmente uno stato interno. Ad esempio, questo form in puro HTML accetta un singolo nome:

<form>
  <label>
    Nome:
    <input type="text" name="nome" />
  </label>
  <input type="submit" value="Submit" />
</form>

Questo form si comporta come di consueto, facendo navigare l’utente in una nuova pagina quando viene inviato. In React, se vuoi avere lo stesso comportamento, non c’è bisogno di fare alcuna modifica. Ad ogni modo, potrebbe essere più conveniente avere una funzione JavaScript che gestisce l’invio del form e che ha accesso ai dati inseriti dall’utente. La tecnica standard con cui si può ottenere ciò prende il nome di “componenti controllati”.

Componenti Controllati

In HTML, gli elementi di un form come <input>, <textarea> e <select> mantengono tipicamente il proprio stato e lo aggiornano in base all’input dell’utente. In React, lo stato mutabile viene tipicamente mantenuto nella proprietà state dei componenti e viene poi aggiornato solo mediante setState().

Possiamo combinare le due cose rendendo lo state in React la “singola fonte attendibile” (SSOT). Possiamo poi fare in modo che il componente React che renderizza il form controlli anche cosa succede all’interno del form in risposta agli input dell’utente. In un form, un elemento di input il cui valore è controllato da React in questo modo viene chiamato “componente controllato”.

Ad esempio, se vogliamo far sì che l’esempio precedente registri il nome inserito, possiamo riscrivere il form sotto forma di componente controllato:

class FormNome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('E\' stato inserito un nome: ' + this.state.value);
    event.preventDefault();
  }

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

Prova su CodeSandbox

Dato che l’attributo value viene impostato nel nostro elemento form, il valore visualizzato sarà sempre this.state.value, rendendo lo stato in React l’unica fonte di dati attendibile. Dato che la funzione handleChange viene eseguita ad ogni battitura per aggiornare lo stato di React, il valore visualizzato verrà aggiornato man mano che l’utente preme i tasti.

Con un componente controllato, il valore dell’input viene sempre controllato dallo stato di React. Anche se ciò comporta la battitura di più codice, permette il passaggio del valore anche ad altri elementi della UI, o di resettarlo da altri event handlers.

Il Tag Textarea

In HTML, l’elemento <textarea> definisce il testo in esso contenuto con i suoi elementi figli:

<textarea>
  Nel mezzo del cammin di nostra vita
  mi ritrovai per una selva oscura
  ché la diritta via era smarrita.
</textarea>

In React, invece, <textarea> utilizza l’attributo value. Per questo, un form che utilizza una <textarea> può essere scritto in modo molto simile a come verrebbe scritto se utilizzasse un semplice input di una sola riga:

class FormTema extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      value: 'Per favore scrivi un tema riguardo il tuo elemento DOM preferito.'    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Un tema è stato inviato: ' + this.state.value);
    event.preventDefault();
  }

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

Nota come this.state.value viene inizializzato nel costruttore, cosìcche la casella di testo è inizializzata con del testo al suo interno.

Il Tag Select

In HTML, <select> crea una lista a discesa. Per esempio, questo HTML crea una lista a discesa di gusti:

<select>
  <option value="pompelmo">Pompelmo</option>
  <option value="limone">Limone</option>
  <option selected value="cocco">Cocco</option>
  <option value="mango">Mango</option>
</select>

Nota come l’opzione Cocco venga preselezionata grazie all’attributo selected. React, piuttosto che usare l’attributo selected, usa l’attributo value dell’elemento radice select. Ciò facilita le cose in un componente controllato in quanto bisogna aggiornare lo stato in un posto solo. Ad esempio:

class FormGusti extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'cocco'