React - 6.3 Définir des styles en ligne dynamiques (partie 2)
Dans React, le style en ligne passe par la propriété style, qui reçoit un objet. Cette leçon reprend un champ de saisie dont la bordure et le fond changent selon que le texte est valide. Elle montre aussi les limites de cette approche.
Passer le style sous forme d'objet
La propriété style attend un objet JavaScript. Les propriétés s'écrivent en notation JavaScript : borderColor pour la couleur de bordure, et background pour le fond. Ce sont les noms utilisés en JavaScript, à la place des noms CSS avec un tiret.
Vérifier la saisie
Le gestionnaire d'événement lit le texte saisi avec event.target.value. La méthode trim() retire les espaces au début et à la fin du texte, puis une variable indique si le champ est valide.
Selon ce résultat, la bordure et le fond du champ changent de couleur. Un champ vide est considéré comme non valide.
Une limite de cette approche
Le style est écrit directement dans le JavaScript du composant, ce qui mélange la logique et la présentation. L'auteur indique qu'il préfère une autre méthode pour organiser ces styles, présentée ensuite.
En résumé
La propriété style reçoit un objet dont les propriétés s'écrivent en notation JavaScript. Une vérification simple avec trim() permet de changer la bordure et le fond selon la saisie. Les styles en ligne ont toutefois des limites, et la vidéo annonce une autre approche.
Points clés
- La propriété style d'un élément React reçoit un objet.
- Les propriétés CSS s'écrivent en notation JavaScript, comme borderColor.
- event.target.value donne le texte saisi dans le champ.
- trim() retire les espaces inutiles avant la vérification.
- Les styles en ligne mélangent style et logique, ce qui a des limites.
Questions fréquentes
Pourquoi écrire borderColor et non border-color ?
En JavaScript, un tiret ne peut pas faire partie d'un nom de propriété. On utilise donc la notation camelCase, comme borderColor.
À quoi sert trim() ?
Il supprime les espaces en début et en fin de texte, pour qu'une saisie faite uniquement d'espaces ne soit pas considérée comme valide.
Faut-il toujours utiliser des styles en ligne ?
Pas forcément. La vidéo indique que l'auteur préfère une autre méthode, qui sépare davantage le style et le code.