Formulaires React : Créez un formulaire de base avec état et événements

Introduction

Dans le développement web, les formulaires sont essentiels pour collecter les entrées utilisateur. En React, la gestion des données de formulaire est un peu différente du HTML traditionnel. L'approche recommandée est d'utiliser une technique appelée "composants contrôlés" (controlled components).

Avec les composants contrôlés, les données du formulaire sont gérées par l'état du composant React. Cela fait de l'état React la "source unique de vérité" (single source of truth), vous permettant de gérer, valider et répondre aux entrées utilisateur de manière prévisible.

Dans ce laboratoire, vous allez construire un formulaire simple avec un seul champ de texte et un bouton de soumission. Vous apprendrez à :

Créer des éléments de formulaire en JSX.
Utiliser le hook useState pour gérer la valeur de l'input.
Gérer les entrées utilisateur avec l'événement onChange.
Traiter les soumissions de formulaire avec l'événement onSubmit.

À la fin de ce laboratoire, vous aurez une solide compréhension des fondamentaux des formulaires React.

Créer un élément input avec l'attribut onChange

Dans cette étape, vous allez commencer par créer la structure de base de notre formulaire. Cela inclut l'ajout d'un élément form et d'un champ de saisie de texte (input). Nous allons également ajouter l'attribut onChange, qui est crucial pour suivre les modifications apportées à la valeur de l'input.

Tout d'abord, préparons notre environnement de développement. Nous devons installer les dépendances du projet et démarrer le serveur de développement.

Ouvrez un terminal dans le WebIDE et exécutez les commandes suivantes, une par une. Assurez-vous d'être dans le répertoire ~/project/my-app.

cd my-app
npm install

Cette commande installe tous les packages nécessaires définis dans package.json.

Maintenant, démarrez le serveur de développement :

npm run dev -- --host 0.0.0.0 --port 8080

Ensuite, naviguez vers le répertoire my-app/src dans l'explorateur de fichiers à gauche et ouvrez le fichier App.jsx. Nous allons modifier ce fichier pour ajouter notre formulaire.

Remplacez le contenu de App.jsx par le code suivant. Nous ajoutons une balise <form> et un élément <input> à l'intérieur. L'attribut onChange est ajouté à l'input, qui sera utilisé plus tard pour gérer les changements de valeur.

import "./App.css";

function App() {
  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" onChange={() => {}} />
      </label>
    </form>
  );
}

export default App;

Après avoir enregistré le fichier, basculez vers l'onglet Web 8080 dans l'interface LabEx. Vous devriez voir un formulaire simple avec un champ de saisie de texte. Si vous ne voyez pas les changements, essayez de rafraîchir l'onglet. À ce stade, taper dans le champ de saisie ne fera rien, mais nous avons la structure de base en place.

Gérer le changement avec une fonction mettant à jour l'état

Dans cette étape, vous allez rendre le champ de saisie interactif. Pour ce faire, nous devons stocker sa valeur dans l'état du composant. Nous utiliserons le hook useState pour créer une variable d'état et une fonction pour la mettre à jour.

Tout d'abord, nous devons importer le hook useState de la bibliothèque 'react'. Ensuite, nous déclarerons une variable d'état, appelons-la name, pour contenir la valeur de l'input.

Ensuite, nous créerons une fonction appelée handleChange. Cette fonction sera déclenchée chaque fois que l'utilisateur tape dans le champ de saisie. À l'intérieur de cette fonction, nous utiliserons la fonction setName fournie par useState pour mettre à jour notre état name avec la valeur actuelle de l'input, que nous pouvons accéder via event.target.value.

Mettez à jour votre fichier App.jsx avec le code suivant :

import { useState } from "react";
import "./App.css";

function App() {
  // Create a state variable 'name' and a function 'setName' to update it
  const [name, setName] = useState("");

  // Define the event handler function
  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Connect the handler to the onChange event */}
        <input type="text" onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Maintenant, lorsque vous tapez dans le champ de saisie, la fonction handleChange est appelée et l'état name est mis à jour à chaque frappe. Bien que vous ne puissiez pas encore voir le changement à l'écran, l'état du composant suit désormais la valeur de l'input. C'est la première moitié de la création d'un composant contrôlé.

Définir l'attribut value de l'input à la valeur de l'état

Dans cette étape, nous allons compléter le modèle du "composant contrôlé". Un composant contrôlé est celui dont la valeur de l'input est pilotée par l'état React, faisant de l'état la "source unique de vérité".

Pour y parvenir, nous devons lier l'attribut value de l'élément <input> directement à notre variable d'état name. Cela crée une liaison de données bidirectionnelle :

L'utilisateur tape, déclenchant onChange, qui met à jour l'état.
La mise à jour de l'état provoque un nouveau rendu, et la value de l'input est définie sur la nouvelle valeur de l'état.

Cela garantit que l'interface utilisateur est toujours synchronisée avec l'état du composant.

Modifiez l'élément <input> dans votre fichier App.jsx pour ajouter l'attribut value, comme ceci :

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Bind the input's value to the state */}
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Après avoir enregistré le fichier, retournez à l'onglet Web 8080. Le formulaire aura la même apparence, mais il s'agit maintenant d'un composant entièrement contrôlé. L'affichage du champ de saisie est désormais directement contrôlé par la variable d'état name de votre composant React.

Ajouter un bouton de soumission avec un gestionnaire onClick

Un formulaire n'est pas complet sans un moyen de le soumettre. Dans cette étape, vous ajouterez un bouton de soumission et un gestionnaire d'événements pour traiter la soumission du formulaire.

La manière standard et la plus accessible de gérer les soumissions de formulaire dans React est d'utiliser l'événement onSubmit sur l'élément <form> lui-même. Cela garantit que le formulaire peut être soumis en cliquant sur le bouton ou en appuyant sur la touche "Entrée" dans un champ de saisie.

Tout d'abord, ajoutons un <button> avec type="submit" à l'intérieur de notre formulaire. Ensuite, nous créerons une nouvelle fonction de gestionnaire, handleSubmit, et l'attacherons à l'attribut onSubmit de l'élément <form>.

Mettez à jour votre fichier App.jsx avec le code suivant :

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  // Create the submit handler function
  const handleSubmit = (event) => {
    // We will add more logic here in the next step
    console.log("Form was submitted");
  };

  return (
    // Attach the handler to the form's onSubmit event
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      {/* Add a submit button */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Maintenant, si vous allez dans l'onglet Web 8080, vous verrez un bouton "Submit". Si vous cliquez dessus, vous remarquerez peut-être que la page se recharge rapidement. C'est le comportement par défaut du navigateur pour la soumission de formulaire, que nous aborderons dans la dernière étape.

Empêcher le comportement par défaut de la soumission et enregistrer les données du formulaire

Dans cette dernière étape, vous allez compléter la fonctionnalité du formulaire. Comme vous l'avez remarqué, cliquer sur le bouton de soumission provoque un rechargement complet de la page. Dans une application monopage (SPA) comme celle construite avec React, nous voulons gérer les soumissions de formulaire en utilisant JavaScript sans recharger la page.

Pour ce faire, nous devons appeler event.preventDefault() à l'intérieur de notre fonction handleSubmit. L'objet event est automatiquement passé au gestionnaire d'événements, et cette méthode arrête l'action par défaut du navigateur.

Une fois que nous avons empêché le comportement par défaut, nous pouvons accéder aux données soumises à partir de notre état et en faire quelque chose, comme afficher une alerte à l'utilisateur.

Mettons à jour la fonction handleSubmit dans App.jsx pour implémenter cette logique.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
    // Show an alert with the submitted name
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Enregistrez le fichier. Maintenant, allez dans l'onglet Web 8080, tapez un nom dans le champ de saisie et cliquez sur le bouton "Submit". Vous devriez voir une alerte apparaître avec le nom que vous avez entré, et la page ne se rechargera pas.

Félicitations ! Vous avez construit avec succès un formulaire contrôlé de base dans React.

Résumé

Dans ce laboratoire, vous avez appris les principes fondamentaux de la gestion des formulaires dans React en utilisant le modèle des "composants contrôlés".

Vous avez réussi à :

Créer un formulaire avec un champ de saisie et un bouton de soumission en utilisant JSX.
Utiliser le hook useState pour gérer les données du formulaire dans l'état du composant.
Implémenter un gestionnaire d'événements onChange pour mettre à jour l'état pendant que l'utilisateur tape, en maintenant la synchronisation entre l'interface utilisateur et l'état.
Gérer la soumission du formulaire avec un gestionnaire d'événements onSubmit, en empêchant le rechargement par défaut de la page du navigateur en utilisant event.preventDefault().
Accéder aux données du formulaire à partir de l'état lors de la soumission.

Ces concepts sont les éléments de base pour créer des formulaires plus complexes et interactifs dans vos applications React. Vous pouvez maintenant appliquer ces connaissances pour construire des formulaires avec plusieurs champs de saisie, différents types de champs et une logique de validation.

Bases des formulaires React