Skip to main content

Chapitre 9 : Composants contrôlés

Interactions utilisateurs, Evénements, Composants contrôlés, Synchronisation UI / état

Les interactions utilisateurs en React​

Une application React est interactive : l’utilisateur clique, saisit du texte, sélectionne des options. Ces interactions doivent modifier l’état de l’application afin que l’interface se mette à jour. En React, toute interaction suit le même principe :
Interaction utilisateur → événement → mise à jour de l’état → re-render

Les événements en React​

Les événements permettent à l’utilisateur d’interagir avec l’application React. Les plus courants sont :

  • onClick
  • onChange
  • onSubmit

Ces événements déclenchent du code en réponse aux actions de l’utilisateur.
Exemple : Afficher un texte après le clic d’un bouton

Pour qu’une interaction ait un impact sur l’interface, elle doit modifier l’état. C’est pourquoi les valeurs saisies par l’utilisateur sont généralement stockées dans l’état du composant. L’état devient la source de vérité de l’interface.

Les composants contrôlés​

Un composant contrôlé est un élément d’interface dont la valeur est entièrement pilotée par l’état React.
L’utilisateur ne modifie pas directement l’élément : il déclenche un événement qui met à jour l’état.

Cette approche permet :

  • de lire et modifier facilement la valeur
  • de déclencher des traitements ou validations
  • de garder un comportement prévisible

Synchronisation UI / Etat​

La synchronisation entre l’interface et l’état garantit que :

  • ce que l’utilisateur voit correspond aux données internes
  • toute modification passe par un chemin clair

Si l’état change, l’interface se met à jour automatiquement. Si l’utilisateur interagit avec l’interface, l’état est mis à jour.

Puisque toutes les valeurs sont stockées dans l’état, il devient facile d’appliquer des règles (exemple: champ obligatoire, longueur minimale, format attendu)

La validation se fait directement à partir de l’état, avant de déclencher une action. Même simple, cette logique améliore la fiabilité de l’application.

Cas concret simple : les formulaires, ce n’est finalement qu’un ensemble d’entrées utilisateur contrôlées.

Questions clés (validation des acquis du chapitre)​

  • Comment React gère-t-il les interactions utilisateur ? Via des événements qui déclenchent des mises à jour de l’état.
  • Qu’est-ce qu’un composant contrôlé ? Un composant dont la valeur est définie et contrôlée par l’état React.
  • Pourquoi l’état est-il la source de vérité ? Parce que l’interface se base toujours sur l’état pour s’afficher.
  • Quel est le lien entre événement et re-render ? Un événement met à jour l’état, ce qui provoque un nouveau rendu.

Exercices :​

Exercice - Création d’un formulaire​

  1. Créer un composant “Formulaire” qui contient 2 champs texte correspondant au nom et au mail de la personne. Il contient aussi un bouton “Submit”.
  2. La valeur saisie dans chaque champ doit être affichée en temps réel.
  3. Pas de contraintes sur le champs “Nom”, mais le champ “Mail” doit au moins vérifier que la valeur saisie contient un “@”.
  4. Le bouton “Submit” est désactivé si l’un des 2 champs est vide, ou bien ne respecte pas la règle métier.
  5. Si les valeurs sont correctes, le bouton “Submit” est cliquable et log “Formulaire envoyé” (console.log(“Formulaire envoyé”).

Exercice - Le Cadenas​

https://docs.google.com/document/d/1Mgm8pwB-lC74zsuBfHluxU00u87nVHW5DE8An7zQrfw/edit?usp=sharing