React
Formulaires et saisie utilisateur

Composants contrôlés

Les composants de formulaire contrôlés sont définis avec une propriété value . La valeur des entrées contrôlées est gérée par React, les entrées utilisateur n'auront aucune influence directe sur l'entrée rendue. Au lieu de cela, une modification de la propriété de value doit refléter ce changement.

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'exemple ci - dessus montre comment la value propriété définit la valeur actuelle de l'entrée et le onChange gestionnaire d'événements met à jour l'état du composant avec l'entrée de l'utilisateur.

Les entrées de formulaire doivent être définies comme des composants contrôlés dans la mesure du possible. Cela garantit que l'état du composant et la valeur d'entrée sont synchronisés à tout moment, même si la valeur est modifiée par un déclencheur autre qu'une entrée utilisateur.

Composants non contrôlés

Les composants non contrôlés sont des entrées sans propriété de value . Contrairement aux composants contrôlés, il est de la responsabilité de l'application de maintenir l'état du composant et la valeur d'entrée synchronisés.

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>
    )
  }
}

Ici, l'état du composant est mis à jour via le onChange gestionnaire d'événements, tout comme pour les composants contrôlés. Toutefois, au lieu d'une propriété value , une propriété defaultValue est fournie. Cela détermine la valeur initiale de l'entrée lors du premier rendu. Toute modification ultérieure de l'état du composant n'est pas automatiquement reflétée par la valeur d'entrée. Si cela est nécessaire, un composant contrôlé doit être utilisé à la place.