React - 6.4 Appliquer dynamiquement des classes CSS

Un champ de formulaire doit parfois changer d'apparence selon son état. Une saisie invalide peut afficher une bordure et un texte rouges. Cette leçon montre comment ajouter une classe CSS de façon conditionnelle, en fonction de la validité de la saisie.

Définir le style d'un état invalide

Dans le fichier CSS, on crée une règle pour la classe invalid, associée à la classe form-control. Cette règle colore la bordure et le texte en rouge.

Le fond du champ prend aussi une teinte rouge, un peu plus claire. Le choix exact de la couleur n'a pas d'importance, tant qu'elle reste lisible.

.form-control.invalid {
  border-color: red;
  color: red;
}

Ajouter la classe selon la validité

Dans le composant React, la classe du champ est construite avec une chaîne de caractères, à laquelle on ajoute du texte de façon dynamique. Une condition sur la validité décide si la classe invalid est ajoutée.

Quand la saisie n'est pas valide, la classe invalid est présente. Quand elle est valide, rien n'est ajouté. React met alors à jour l'affichage du champ.

Le résultat à l'écran

Le champ garde sa classe de base dans tous les cas. Quand la saisie devient invalide, le style d'erreur apparaît. Quand elle redevient valide, la classe invalid disparaît.

L'auteur décrit cette méthode comme une manière plus simple d'obtenir le même résultat. Elle repose sur une condition et sur les classes CSS déjà existantes.

En résumé

Une classe CSS peut être ajoutée ou retirée selon l'état d'un champ. La règle invalid colore la bordure et le texte en rouge. La condition sur la validité met à jour l'apparence sans rechargement de la page.

Points clés

• La règle .form-control.invalid définit le style d'erreur.
• La classe invalid est ajoutée seulement si la saisie n'est pas valide.
• Une chaîne de caractères permet de composer la liste des classes.
• React met à jour l'affichage quand l'état change.
• Le champ revient à son style normal dès que la saisie est valide.

Questions fréquentes

Pourquoi utiliser une classe plutôt qu'un style direct ?

La classe garde le style regroupé dans le CSS. Le composant se contente de l'ajouter ou de la retirer.

Que se passe-t-il quand la saisie redevient valide ?

La classe invalid n'est plus ajoutée. Le champ reprend son style normal, sans action supplémentaire.

La couleur rouge est-elle obligatoire ?

Non. La vidéo utilise le rouge pour attirer l'attention, mais n'importe quelle couleur bien visible convient.