React
Forms e User Input

Componenti controllati

I componenti del modulo controllato sono definiti con una proprietà value . Il valore degli ingressi controllati è gestito da React, gli input dell'utente non avranno alcuna influenza diretta sull'input reso. Invece, una modifica alla proprietà del value deve riflettere questo cambiamento.

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: ''
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          value={this.state.name} />
      </div>
    )
  }
}

L'esempio sopra mostra come la proprietà value definisce il valore corrente dell'input e il gestore di eventi onChange aggiorna lo stato del componente con l'input dell'utente.

Gli input del modulo dovrebbero essere definiti come componenti controllati laddove possibile. Ciò garantisce che lo stato del componente e il valore di input siano sincronizzati in ogni momento, anche se il valore viene modificato da un trigger diverso da un input dell'utente.

Componenti non controllati

I componenti non controllati sono input che non hanno una proprietà value . Al contrario dei componenti controllati, è responsabilità dell'applicazione mantenere in sincrono lo stato del componente e il valore di input.

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: 'John'
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          defaultValue={this.state.name} />
      </div>
    )
  }
}

Qui, lo stato del componente viene aggiornato tramite il gestore di eventi onChange , proprio come per i componenti controllati. Tuttavia, anziché una proprietà value , viene fornita una proprietà defaultValue . Questo determina il valore iniziale dell'input durante il primo rendering. Qualsiasi modifica successiva allo stato del componente non viene automaticamente riflessa dal valore di input; Se è necessario, dovrebbe essere usato un componente controllato.