Composants non-contrôlés

Dans la plupart des cas, pour implémenter des formulaires, nous recommandons d’utiliser des composants contrôlés. Dans un composant contrôlé, les données du formulaires sont gérées par le composant React. L’alternative est le composant non-contrôlé, où les données sont gérées par le DOM.

Au lieu d’écrire un gestionnaire d’événements pour chaque mise à jour de l’état d’un composant non-contrôlé, vous pouvez utiliser une ref.

Par exemple, ce code accepte une saisie de nom dans un composant non-contrôlé :

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();  }

  handleSubmit(event) {
    alert('Un nom a été envoyé : ' + this.input.current.value);    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Nom :
          <input type="text" ref={this.input} />        </label>
        <input type="submit" value="Envoyer" />
      </form>
    );
  }
}

Essayer sur CodePen

Puisqu’un composant non-contrôlé garde la source de vérité dans le DOM, il est parfois plus simple d’intégrer du code React à base de composants non-contrôlés avec du code non-React. Le code peut également être légèrement plus concis si vous souhaitez pondre un truc vite fait. Autrement, vous devriez utiliser les composants contrôlés.

Si dans une situation donnée il n’est pas toujours évident de savoir quel type de composant utiliser, cet article sur les champs contrôlés ou non-contrôlés vous sera peut-être utile.

Valeurs par défaut

Dans le cycle de vie des rendus React, l’attribut value des éléments du formulaire va écraser la valeur du DOM. Avec un composant non-contrôlé, vous souhaiterez plus souvent spécifier la valeur initiale et laisser les mises à jours suivantes non-contrôlées. Dans ces cas-là, vous pouvez spécifier un attribut defaultValue plutôt que value. Changing the value of defaultValue attribute after a component has mounted will not cause any update of the value in the DOM.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Nom :
        <input
          defaultValue="Thierry"          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Envoyer" />
    </form>
  );
}

Dans la même série, <input type="checkbox"> et <input type="radio"> ont un attribut defaultChecked, et <select> et <textarea> ont aussi defaultValue.

La balise input type="file"

En HTML, un <input type="file"> permet à l’utilisateur de sélectionner un ou plusieurs fichiers depuis son appareil, et de les téléverser vers un serveur ou de les manipuler en JavaScript grâce à l’API File.

<input type="file" />

<input type="file" /> est toujours un composant non-contrôlé en React, puisque sa valeur ne peut être définie que par l’utilisateur et non programmatiquement.

Vous devriez utiliser l’API File pour interagir avec les fichiers. L’exemple suivant montre comment créer une ref sur le nœud DOM pour accéder aux fichiers lors de l’envoi du formulaire :

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Fichier sélectionné - ${        this.fileInput.current.files[0].name
      }`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Envoyer un fichier :
          <input type="file" ref={this.fileInput} />        </label>
        <br />
        <button type="submit">Envoyer</button>
      </form>
    );
  }
}

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<FileInput />);

Essayer sur CodePen