1
Formation Certifiante Développement WEB
React Forms
Ajout de formulaires dans React
Vous ajoutez un formulaire avec React comme n'importe quel autre élément :
Exemple:
✓ Ajoutez un formulaire qui permet aux utilisateurs de saisir leur nom :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
2
Formation Certifiante Développement WEB
Traitement des formulaires
✓ La gestion des formulaires concerne la manière dont vous gérez les
données lorsque leur valeur change ou est soumise.
✓ En HTML, les données du formulaire sont généralement gérées par le
DOM.
✓ Dans React, les données du formulaire sont généralement gérées par les
composants.
✓ Lorsque les données sont traitées par les composants, toutes les
données sont stockées dans l’état du composant.
✓ Vous pouvez contrôler les modifications en ajoutant des gestionnaires
d’événements dans l’ onChange attribut.
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
3
Formation Certifiante Développement WEB
Nous pouvons utiliser le useStateHook pour suivre la valeur de chaque entrée et
fournir une « source unique de vérité » pour l'ensemble de l'application.
Exemple:
Utilisez le useState Hook pour gérer l'entrée :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
4
Formation Certifiante Développement WEB
Soumission de formulaires
Vous pouvez contrôler l'action de soumission en ajoutant un gestionnaire
d'événements dans l' onSubmit attribut pour <form> :
Exemple:
Ajoutez un bouton d’envoi et un gestionnaire d’événements dans l’ onSubmit attribut :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
5
Formation Certifiante Développement WEB
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
6
Formation Certifiante Développement WEB
Champs de saisie multiples
✓ Vous pouvez contrôler les valeurs de plusieurs champs de saisie en
ajoutant un nameattribut à chaque élément.
✓ Nous allons initialiser notre état avec un objet vide.
✓ Pour accéder aux champs du gestionnaire d’événements, utilisez la
syntaxe event.target.name et event.target.value.
✓ Pour mettre à jour l'état, utilisez des crochets [notation entre crochets]
autour du nom de la propriété.
Exemple:
Écrivez un formulaire AddProduit avec plusieurs champs de saisie :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
7
Formation Certifiante Développement WEB
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
8
Formation Certifiante Développement WEB
Sélectionner (balise select) :
1. Une liste déroulante ou une zone de sélection dans React est également
un peu différente du HTML.
2. En HTML, la valeur sélectionnée dans la liste déroulante était définie
avec l' selected attribut :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
9
Formation Certifiante Développement WEB
Dans React, la valeur sélectionnée est définie avec un value attribut sur la select balise :
Exemple:
Une simple boîte de sélection, où la valeur sélectionnée « Volvo » est
initialisée dans le constructeur :
International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
