Formulaires React Hook : maîtriser la gestion des formulaires dans React

1. Introduction du cours: Bienvenue dans ce cours sur la maîtrise des formulaires React Hook. Je suis Fazal, et je suis ravi de vous guider dans ce voyage dans lequel nous apprendrons comment gérer efficacement les formulaires dans React Maintenant, la gestion des formulaires peut être une tâche complexe et fastidieuse, et c'est pourquoi je suis ravi vous présenter React Hook Form, un outil qui révolutionne la gestion des formulaires dans Tout au long de ce cours, nous explorerons tout, des formulaires de base aux techniques de validation avancées, en passant par la rationalisation et l'efficacité de la gestion de vos formulaires. Couvrez de nombreux sujets, comme l'introduction aux formulaires dans React. Nous parlerons des formulaires React Hook, de base, dans lesquels nous aborderons les détails de la gestion des formulaires avec React Hook Form et fonctionnement de cette bibliothèque appelée React Hook Nous comprendrons également les techniques de validation et la manière dont vous pouvez mettre en œuvre des validations robustes Nous découvrirons les améliorations des performances, et je peux vous assurer qu' à la fin de ce cours, vous aurez tous les outils et connaissances nécessaires pour créer des formulaires puissants et conviviaux dans React. qui s'adresse ce cours ? Ce cours est donc parfait pour tous ceux qui cherchent à améliorer leurs capacités de réaction Maintenant, que vous soyez débutant ou que vous souhaitiez approfondir vos connaissances ou la gestion de formulaires dans React, tout le monde peut bénéficier de ce cours en particulier. Ce cours est entièrement pratique, et peu importe ce que nous allons apprendre, nous l'apprendrons en examinant des exemples réels. Je suis donc très heureuse de vous emmener dans ce voyage passionnant. J'espère que vous êtes aussi enthousiaste, et je vous verrai de l'autre côté. 2. Premiers : simplifier les formulaires dans React: Il est maintenant temps de parler des formulaires et de la manière dont vous pouvez gérer les données des formulaires dans React. Donc, ce que nous allons faire, c'est créer un formulaire de base et nous allons créer un formulaire de base et découvrir les détails de la gestion des formulaires ou de la gestion des données avec Forms J'ai donc ici un projet React Wheat très simple, vous pouvez le voir, et c'est un code très simple. Au début, j'ai fait un petit nettoyage dans l'application JSX, comme vous pouvez le voir, comme vous pouvez Et app.j6 est rendu en point moyen Jx ici avec le mode strict Fermez ça. Et voici un CSS, qui est un CSS très basique. Ce n'est pas grand-chose. Je règle la marge à zéro pixel pour tous, puis pour Dev, j'ajoute flex, l'affichage de flex justifiant que tout soit centré. C'est bon. Je vais donc simplement fermer ceci et nous allons nous concentrer sur app.j6. C'est bon. J'ai le serveur en cours d'exécution et vous pouvez voir le résultat sur le côté droit. D'accord ? Maintenant, ce que je vais faire, c'est ajouter un champ de saisie très simple, et nous allons poursuivre sur cette lancée. C'est bon. Donc, ce que je ferais ici est ici. OK ? Je dirais formulaire, ou parce que le champ de saisie doit être à l'intérieur de la balise Fm, d'accord ? C'est donc notre tag FM, d'accord. Et je vais dire que lors de la soumission ici, lors de la soumission, nous devons le soumettre quelque part. OK ? Nous avons donc besoin d'une fonction qui gérera la soumission. Mais pour l'instant, je vais garder ce champ vide et je le remplirai plus tard. Je vais ajouter une étiquette ici, d'accord. Et l'étiquette portera le nom. OK. Laisse-moi voir si ça marche. Je vais avoir un message d'erreur. Permettez-moi donc d'ajouter cette fonction également parce que nous n' allons pas voir le résultat, donc je dirais de gérer la soumission ici, soumettre quelque chose comme ça. Et ici, dans le composant, je vais dire const, handle submit, quelque chose comme ça, et j'ai une fonction de flèche mt ici, ajoutée C'est bon. Rien ne se passe donc pour le moment, car nous devons définir la logique du fonctionnement de la soumission. C'est bon. Maintenant, cette étiquette existe, d'accord ? Nous avons la balise de fermeture du label, et je vais ajouter une entrée ici. OK. Et je vais dire que l'entrée est de type texte. OK ? Donc, le type est du texte ici, et je vais dire que le nom est le nom ici. OK. Cela a donc guillemets simples, il vaut mieux avoir de la cohérence ici. C'est un nom. J' aurai de la valeur ici. Maintenant, qu'est-ce que la valeur ? Valeur, nous devons attribuer. OK, donc je vais juste avoir zéro ici, quelque chose comme ça. OK. Mais ce n'est pas le vrai nom. Nous devons le lier à quelque chose ou essayer si nous créons. OK ? Je dirais donc qu'en ce qui concerne le changement, nous devons gérer le changement ici. OK ? Alors, en cas de changement, que se passera-t-il ? Je vais le mentionner également. OK ? Maintenant, je vais venir ici et je vais vous dire de gérer le changement. Quelque chose comme ça. OK. Voici donc, vous savez, ce champ qui a été ajouté, d'accord ? Maintenant, ce que je fais, c'est que j'utilise cette valeur, elle lie la valeur initiale ici. On change déclenchera l'événement onchange s'il y a un changement dans ce champ en particulier, d'accord ? Et en ce moment, je crée un lien comme si on change, appelez cette fonction particulière handle change. Et c'est une fonction qui va gérer le changement pour nous, d'accord ? Nous pouvons avoir un peu de logique ici, d'accord ? Donc, en cas de changement descripteur, je peux accepter l'objet de l'événement ici. OK. Et je peux dire « console point log » par ici, d'accord ? Et je peux dire la valeur du point cible E. OK. Et ici, si j'entre, d' accord, je pense que ça devrait aller pour le moment. Laisse-moi enregistrer ça. Laissez-moi me rendre pour inspecter. Nous devrions voir le journal au fur et mesure que nous sommes en train de taper. Je vais donc faire une mise à jour complète pour que toutes les erreurs disparaissent. OK. Et je vais juste dire, pour que vous puissiez voir, que je tape des choses. Oups. Donc, en gros, cela a une valeur de zéro. C'est donc un problème ici. Si je fais un commentaire, permettez-moi de le commenter. OK. Et maintenant, si je tape, d'accord, je peux dire que j'adore. Vous pouvez voir réagir. Vous pouvez voir comment cela se déclenche. Il imprime donc tout à chaque fois que je tape sur chaque touche ici. OK ? C'est donc ce qui se passe ici. Maintenant, la valeur ici que j'ai commentée, d'accord, c'est un attribut de saisie qui contrôle le texte affiché dans le champ de saisie. OK ? Donc, si je le lie à zéro, si je dis zéro ici, vous verrez zéro ici, comme nous le voyions. Et normalement, le champ de valeur est généralement utilisé pour lier un champ particulier à une variable d'état. OK ? Nous n'avons pas encore créé de variable d'état, que nous allons créer dans un instant, mais c'est pourquoi la valeur est utilisée et je l'ai commentée jusqu'à ce que nous ayons l'état de la variable en cours de création, d'accord ? En cas de changement ici, il s'agit d'un gestionnaire d'événements qui suit le changement dans le champ de saisie Ainsi, chaque fois que l'utilisateur saisit ou modifie une entrée, la fonction de modification est déclenchée, vous permettant de mettre à jour l'état avec la nouvelle valeur d'entrée OK ? Donc, pour le moment, nous ne jouons pas encore avec State, mais ce que nous faisons, c'est sur le changement, nous assistons à un changement de handle, et cette fonction est déclenchée chaque fois qu'il y a un changement dans le champ de saisie. Et que faisons-nous pour gérer le changement ? Nous acceptons l'objet de l'événement, et nous disons une valeur de point cible, ce qui nous donne la valeur qui se trouve dans le champ de texte, d'accord ? Ainsi, E représente essentiellement l'objet d'événement qui est transmis à la fonction lorsque l'événement se produit, et l'événement peut être quelque chose comme cliquer sur un bouton ou taper dans un champ. Voici quelques éléments de base sur le fonctionnement de ce code jusqu'à présent. OK ? Maintenant, ce que nous allons faire, c'est lier tout à un État. Je vais donc dire const, je vais dire données de formulaire. C'est donc une statistique que je crée et les données du formulaire vont essentiellement m'aider à stocker les données pour l'ensemble du formulaire. Il peut donc y avoir plusieurs champs dans le formulaire. À l'heure actuelle, nous n' avons qu'un seul champ. Nous pourrions avoir plusieurs champs, et nous pourrions avoir utilisé ou utiliser les données du formulaire pour tout stocker. OK ? Je vais donc parler des données du formulaire ici. Et ce que je vais faire maintenant c'est utiliser use state ici, use state, quelque chose comme ça, et je vais l'initialiser à quelque chose OK. Donc, ici, je vais avoir un objet. Je vais l'initialiser en objet et utiliser des paires clé-valeur OK. Ce sera donc vide. Le nom sera vide. Si demain il y a plusieurs champs, je m' assurerai de mettre à jour cet objet ici. OK ? J'espère que cela a du sens. OK ? Donc c'est le nom ici, et je vais le dire comme ça. OK ? Cela me semble donc mieux. OK. Donc oui, ce sont des données de formulaire ici, et maintenant ce que nous devons faire, c'est ce que je ferais, je dirais à propos du changement de descripteur, d'accord ? Nous avons la valeur ici, et la valeur cible, la valeur du point cible. OK ? Donc, ce que je vais faire, c'est appeler Set Form data. Parce qu'à chaque modification, je veux m'assurer que la variable d'état contient les données mises à jour. Ici, je vais parler des données du formulaire. Donc, déstructurez d'abord les données du formulaire, quelles que soient les données qu'elles contiennent, ajoutez-les OK ? Ensuite, vous ajoutez des crochets, vous inscrivez le nom du point cible ici, d' accord, vous ajoutez deux points et vous dites valeur du point cible E. Oups, valeur. OK, ce genre de suggestion n'est pas bon, mais le point cible la valeur du point et je vais l'ajouter ici. OK ? Maintenant, ce que fait cette fonction ou ce morceau de code se trouve ici. Cela est donc clair lorsque cela s' appelle un changement de poignée. Chaque fois que vous modifiez quoi que ce soit dans le champ, le changement de poignée est appelé. Il transmet l'objet de l'événement, qui contient les détails de l'événement dans son intégralité, n'est-ce pas ? Donc, ce que nous faisons ici, c'est que nous voyons des données de formulaires fixes. OK, déstructurez les données du formulaire actuel. OK ? Donc, avec cet opérateur de propagation, nous disons de conserver les valeurs existantes données de formulaire, afin qu'elles se propagent d'elles-mêmes. OK ? Ensuite, nous obtenons le nom du champ ici. Maintenant, le nom est ici, si vous faites défiler l'écran vers le bas, c'est le nom, n' est-ce pas, qui est également l' attribut ici, n'est-ce pas ? L'attribut et celui-ci devraient correspondre ici. Le nom et ce nom devraient correspondre à la clé ici, non ? Donc ça correspond. Nous voyons donc point E, le nom du point cible, deux points, la valeur du point cible. OK ? Donc ça devient le nom colon, quelle que soit la valeur que tu as saisie, d'accord ? Et lorsque vous ajoutez ceci, c'est le champ qui a changé parce que c'est un champ dont nous parlons. Le champ qui a changé sera remplacé dans ces données étalées ici. C' est ce qui va se passer. Définir les données du formulaire sélectionnera toujours les dernières données existantes et mettra à jour l'état du formulaire. Laissez-nous vérifier si cela fonctionne correctement. Je vais faire une mise à jour complète. OK. Et ce que je vais faire, c'est , d' accord, nous utilisons en fait des données de formulaire. OK ? Ce que nous pouvons faire, c'est qu'ici, nous n' utilisons pas encore l'État. OK ? Donc, ce que nous ferions, c'est que si vous faites défiler la page vers le bas, nous ne voyons aucune sorte d'erreur ici. Ici, dans la valeur. Permettez-moi de décommenter cela Maintenant, nous avons un État, non ? Je peux donc dire le nom du point de données du formulaire, quelque chose comme ça. Nous sommes en train de lier cela à une variable d' état, en gros. Si j'actualise, vous ne verrez aucune sorte d'erreur et vous pouvez saisir du texte. Vous pouvez donc dire test. Vous pouvez voir tout ce qui arrive sur la console. Ici, au lieu d'imprimer la valeur du point cible, nous pouvons essayer d'imprimer le nom du point de données du formulaire ici. OK. Laissez-nous faire une mise à jour complète, puis vous pourrez dire test. Vous pouvez voir comment les données mises à jour arrivent. OK, donc c'est un pas en retard, nous avons saisi T et T n'est pas entré car la mise à jour de T est effectuée après l'impression de la valeur OK ? Donc, si vous déplacez cette ligne après avoir mis à jour l'état ici. OK, alors dans ce cas, vous allez voir les dernières nouveautés. OK ? Donc si je dis test, vous pouvez voir, oups, c'est toujours pareil ici OK, donc c'est parce que les mises à jour sont asynchrones, d'accord ? Et vous occupez en fait la même fonction. Vous essayez de l' imprimer sur la console, d'accord ? Mais l'État est parfaitement mis à jour, d'accord ? n'y a aucun problème en tant que tel, donc je vais me débarrasser de ce journal des points de la console pour le moment, d'accord ? Maintenant, laissez-nous nous occuper de la soumission ici. OK. Alors, que se passe-t-il lorsque vous soumettez le formulaire ? C'est bon. Maintenant, lorsque vous soumettez le formulaire, nous indiquerons d'abord le point E pour empêcher la valeur par défaut. OK. Maintenant, qu'est-ce que E est ici ? Nous n'acceptons pas E, nous devons donc accepter le parent, désolé, nous devons accepter le paramètre de type E du nom E, qui est un événement. Je dirais empêcher le défaut, nous le faisons parce que nous ne voulons pas le comportement par défaut ici. comportement par défaut lors de la soumission dans les navigateurs est donc le rechargement de la page. Ce n'est pas ce que je veux. OK ? Je vais donc simplement faire un journal des points de la console. Je vais dire les données du formulaire soumises. Ici, et ici, des données de formulaires, quelque chose comme ça. OK, vous l'avez fait, et maintenant, si vous faites défiler la page vers le bas, d'accord, nous devons ajouter un moyen pour que les gens puissent soumettre le formulaire. Donc, ce que je vais faire, c'est ici à la fin, je vais avoir un bouton. OK, je vais appeler cela un bouton d'envoi, et le type de ce bouton est Soumettre. OK ? Quelque chose comme ça. Permettez-moi de rafraîchir ici, S et rafraîchir. C'est bon. Et nous pouvons voir que le nom est I love react. OK ? Laissez-moi vous soumettre. Vous pouvez voir les données du formulaire et vous pouvez voir que la variable d'état est mise à jour. Vous pouvez voir que le nom est I love react. C'est bon. Donc oui, ça marche très bien , comme vous pouvez le voir ici, d'accord ? Comment est cet état, quel est cet état ? Que fait cet État ? Cet état garde une trace des données qui existent dans le formulaire, o et nous utilisons l'objet, qui se compose de paires clé-valeur, n'est-ce pas ? Et comment fait-il le suivi des données ? Il assure le suivi à l' aide d'un changement de poignée. Donc, le changement de descripteur est déclenché lors d'un événement de changement, d'accord ? Ainsi, chaque fois qu'il y a un changement dans la zone de saisie, changement de poignée est déclenché, et il s'agit essentiellement de mettre à jour ce truc ici. Il s'agit essentiellement de mettre à jour les données du formulaire ici. Tu peux voir. Et les données du formulaire seront toujours à jour Tout ce que vous saisissez sera présent dans les données du formulaire, d'accord ? Ensuite, il gère la soumission. Comment gère-t-il la soumission ? Chaque fois que vous cliquez sur ce bouton, cela indique « empêcher les valeurs par défaut », et il s'agit simplement d'imprimer la valeur mise à jour dans les données du formulaire. OK. Voyons comment cela fonctionnera si vous avez encore un champ ici. OK. Maintenant, si vous avez un autre champ, laissez-moi le dupliquer ici. Je vais prendre ça. Au lieu du nom, j'ai maintenant un e-mail ici, d'accord ? Et le type est le courrier électronique. OK. Je dirais e-mail. Le nom est également e-mail ici, données du formulaire point e-mail ici, et le changement de pseudonyme est identique. OK ? Les données du formulaire pointent le courrier électronique, nous devons donc ajouter une valeur supplémentaire ici, n'est-ce pas ? Donc je vais dire ici. Je vais dire une virgule et j'ajouterai un e-mail, quelque chose comme ça. OK, c'est fait, et je vais faire comme ça. C'est bon. Donc c'est fait, non ? J'ai aussi un e-mail maintenant. Maintenant, faisons une mise à jour complète, et je peux taper iOveract je vais dire john at rate Oups, exemple.com. Laissez-moi vous soumettre. Au moment où je soumets, vous verrez que le nom est « I love React et que l'e-mail est joint à rate example.com J'espère que cela a du sens. Maintenant, le nombre de champs que vous avez, le nombre d'attributs que vous allez ajouter dans cet objet d'état ici, d'accord ? Donc, ces données de formulaire se chargeront de gérer l'intégralité des données du formulaire pour vous, d'accord ? Et ces deux fonctions vous aideront à gérer les données, accord, comment fonctionne la soumission, comment fonctionne le changement, etc. OK ? Et le formulaire peut continuer à s' allonger de temps en temps, non ? J'espère donc que vous avez pu me suivre, et j'espère que cela vous a été utile. 3. Dépannage : pièges courants dans les formulaires de base React: Il est donc temps de commencer à améliorer ce formulaire que nous avons créé, n'est-ce pas ? Et nous allons ajouter une sorte de validations sous cette forme particulière, n'est-ce pas ? Parce que, vous savez, lorsque nous travaillons avec des formulaires, les validations de formulaires sont courantes, et vous souhaiterez peut-être valider les données que l'utilisateur remplit dans les formulaires, n'est-ce pas ? C'est donc ce que nous allons faire. Donc, ce que je vais faire ici, c'est avoir une fonction ici , définie, d'accord ? Je vais dire const, valider. D'accord. Cette fonction de validation est donc une fonction flèche ici et je vais avoir la logique à l'intérieur de cette fonction. Donc, ce que je vais faire, c'est d'abord. La validation va donc nous donner des erreurs, et nous souhaiterons peut-être suivre les erreurs. Donc d'abord, je vais dire const ici. Je vais créer un état appelé erreurs, et je vais appeler set errors. D'accord. Maintenant, cela va nous aider à garder une trace de toutes les erreurs qui se produisent ici, d'accord ? Je vais l'initialiser pour vider les paires clé-valeur, d'accord ? Et dans Validate , je vais créer de nouvelles erreurs constantes, et créer un objet de paire clé-valeur vide, d'accord ? C'est bon. Maintenant, je vais dire si je vais voir les données du formulaire. Je dois vérifier si le nom est renseigné par utilisateur ou non. Je veux que le nom soit obligatoirement renseigné. Je vais donc dire le nom du point de données du formulaire point Trim. D'accord. Si cette valeur n'existe pas, j'ajouterai une exclamation Si cette valeur n'existe pas, c'est ce que cette condition vérifie. Je vais dire le nom du point d'erreur pour les nouvelles erreurs, et je dirai que le nom est obligatoire. D'accord ? Je dirais donc que le nom est obligatoire, quelque chose comme ça. C'est bon. Et ce que je ferais, c'est renvoyer de nouvelles erreurs. D'accord. Je renverrais donc de nouvelles erreurs, non ? Quelque chose comme ça. Donc, cette fonction crée des messages d'erreur. Il valide et crée des messages d'erreur et nous renvoie la paire clé-valeur, devrais-je dire Donc, ici, ce qui se passe, c'est le nouveau nom du point d'erreur. Cela va donc avoir un attribut de nom avec ce message. Mais cela nous donne un objet contenant essentiellement tous les messages d'erreur, et la clé est essentiellement le nom du champ ici, qui est le champ de nom. Vous pouvez donc voir ici qu'il s'agit du champ du nom. Hein ? Maintenant, ce que nous devons faire c'est déclencher cette validation ici. D'accord ? Maintenant, quand devons-nous déclencher la validation ? Nous verrons donc sur le handle submit. D'accord ? Je vais dire const, erreurs de validation D'accord, les erreurs de validation sont équivalentes à celles de validation, d'accord ? Quelque chose comme ça. C'est bon. Et je vais dire si je dois vérifier si les erreurs de validation contiennent des paires clé-valeur. Je dirais donc des clés enseignées par des objets. Donc, si l'objet touche des points pour des erreurs de validation, d'accord. La durée enseignée est supérieure à zéro ici. D'accord. Ensuite, ce que nous devons faire, c'est dire « erreurs de configuration ». D'accord, je vais définir les erreurs, et je vais dire les erreurs de validation. Comme ça. D'accord. Sinon, nous soumettrons le formulaire, n'est-ce pas ? S'il n'y a pas d'erreur de validation, nous devons envoyer le formulaire. Alors oups Donc, je vais juste avoir ce truc ici, je vais le couper et déplacer dans le bloc se parce que le formulaire ne doit être soumis qu'en l'absence d'erreur de validation. accord ? Quelque chose comme ça. C'est chose faite. D'accord. Et oui, je pense que c'est ça. Nous devons également afficher les messages d'erreur. D'accord ? Je vais donc faire défiler la page vers le bas. D'accord. Et ici, juste à côté du nom, d'accord ? Juste à côté du changement de nom sur le handle. OK, je vais avoir du code ici. Je vais dire que les erreurs sont tendues, le nom est ici. Si les erreurs pointent le nom, et je vais utiliser le terme logique et, et je vais dire span, et je vais et je vais dire span, et je vais juste terminer la balise span ici et je vais dire errors, Tt, name, quelque chose comme ça. D'accord. Alors maintenant, s' il y a une erreur, elle sera affichée ici, d'accord ? Cela n'est donc affiché que si cela est vrai. Si le nom du point d'erreur existe uniquement, il est affiché. Dans le cas contraire, il n'est pas affiché. D'accord ? Si je le soumets, je ne vois rien pour le moment. Cela ne fonctionne donc probablement pas parce que je pense que j'ai fait une erreur ici en matière de finition. La garniture est donc essentiellement une fonction. Ce processus ouvert et final me manque. D'accord. Permettez-moi de me rafraîchir. Et si je dis « soumettre », vous verrez que le nom est obligatoire. C'est bon. Et cela s'affiche d'une manière étrange car je n'utilise littéralement aucun CSS. D'accord, du CSS très basique. Mais tu comprends comment ça marche, d'accord ? Vous pouvez ajouter du CSS selon votre choix si vous le souhaitez. C'est bon. Donc, ce que je peux faire , c'est ici en espan, je peux dire style ici, ici même. Je peux dire qu'à l'intérieur de cela, je peux dire couleur, d'accord. Comme ça. OK, donc vous pouvez voir qu'il est maintenant de couleur rouge, non ? Et oui, les erreurs s'affichent, d' accord, ici. Pour ajuster les choses sur une nouvelle ligne ou pour faire un saut de ligne ici, ce que je peux faire, c'est qu' une fois l'élément span rendu, je peux ajouter une balise de saut de ligne ici comme ceci. D'accord. Cela garantira donc que les choses sont sur la nouvelle ligne, correctement, et que le message d'erreur s'affiche de cette façon. Mais vous pouvez voir comment le nom est requis, et je peux le taper. Je peux dire tester, et je peux voir soumettre. D'accord ? Oups, il est toujours là. 1 seconde Laisse-moi vérifier. Alors testez. Cela fonctionne bien. Et si je m'en débarrasse, d' accord, ce n'est pas là. Et puis si je tape, c'est toujours là. Ce n'est donc pas effacé parce que les nouvelles erreurs ou l'état d'erreur ici ne sont pas effacés. OK, nous ne sommes donc pas mis à jour lorsque je saisis les données, n'est-ce pas ? Donc, ce que nous devons faire, c'est ici pour gérer le changement, accord, pendant que nous saisissons les données ou sur le handle submit. OK, donc il vaut mieux que je m'occupe du changement de poignée ici. Donc, dans le cadre du changement de poignée , je vais créer un concept ici. OK, et je vais avoir la valeur du nom. D'accord. Et je dirais que c'est une cible. D'accord ? Donc, ce que je fais, c'est que je reçois le nom du champ et la valeur de l'endroit où le changement se produit. D'accord ? C'est ce que je fais ici avec ça, d'accord ? Ensuite, une fois les données du formulaire définies, je vais dire OK s'il y a valeur pour les erreurs et nommez, OK, où se produit le changement. D'accord. Dans ce cas, dites « const new errors », et je vais déstructurer les erreurs existantes, Restructurez ceux qui existent déjà. C'est bon. Ensuite, nous pouvons dire « supprimer les nouvelles erreurs », puis « nom ». D'accord. C'est un peu maniable ici. D'accord ? Et je vais dire définir les erreurs, et je vais définir le nouvel objet d'erreur, je vais dire les nouvelles erreurs. Comme ça. D'accord. C'est chose faite. Et maintenant, au fur et à mesure que nous changeons, vous verrez que l'erreur est en train d'être supprimée. D'accord ? Si je m'en débarrasse et si je dis Soumettre, nom est requis, et si je dis que j'adore React, l'erreur disparaît. Vous pouvez voir à quel point c'est dynamique. D'accord. Vous pouvez le mettre à jour et améliorer également pour d'autres champs. Mais dans ce seul domaine, vous avez également eu beaucoup de travail, n'est-ce pas ? Vous pouvez donc imaginer à quel point les validations peuvent devenir complexes ici D'accord. Donc, le but de faire tout cela et de vous le montrer était de vous montrer comment les formulaires peuvent être créés dans React sans utiliser aucune sorte de bibliothèque ici, comme des formulaires à crochets, d'accord ? Donc, si vous gérez vous-même les formulaires dans React, c'est tout ce que vous aurez à faire, d'accord ? Vous pouvez voir comme un formulaire avec seulement deux champs, vous aviez tant de choses à écrire. Il y a beaucoup de duplications de code, non ? Donc, pour plusieurs champs, la fonction de changement de poignée augmentera en taille, n'est-ce pas ? Il y aura beaucoup de code là-dedans. Pour la validation, vous devez ajouter d'autres validations, d'accord ? Par exemple, ici, nous ajoutons une validation dans la fonction de validation du nom, d'accord ? Vous devez également ajouter une validation similaire pour les e-mails. D'accord ? Maintenant, envoyez un e-mail si vous souhaitez ajouter une sorte de validation complexe, exemple vérifier, ajouter le taux et le format du courrier électronique, vous devrez écrire tout cela. D'accord. Cela ajoutera donc beaucoup de complexité ici. Cette méthode va également se développer, d'accord ? Et avec de nombreux champs, imaginez à quoi ressemblera le rendu, n'est-ce pas ? Cela va devenir délicat. Donc oui, c'est le problème que je veux souligner ici. Eh bien, une approche aurait été vous le montrer directement en utilisant les formulaires React Hook et en vous expliquant à quel point ils sont faciles à utiliser, d'accord ? Mais je voulais d'abord passer par le plus dur, d'accord ? Vous comprenez d' abord comment les choses sont gérées dans React à l'aide de JavaScript. D'accord. J'utilise donc également du code JavaScript et fonctionnalités de réaction telles que les états ici. D'accord ? Comment les choses sont gérées dans React à l'aide de JavaScript. OK, tu dois d'abord comprendre ça. Ce n'est qu'alors que vous en comprendrez l'importance. Donc, si vous passez par là, ce n'est qu' alors que vous comprendrez l'importance d' utiliser des formulaires React Hook ou une autre bibliothèque, n'est-ce pas ? C'est donc quelque chose que je voulais souligner. C'est bon. J'espère donc que vous avez une idée de la façon dont vous pouvez effectuer des validations, gérer les soumissions et gérer les messages d'erreur avec React et JavaScript 4. Libérer la puissance : une plongée approfondie dans le format React Hook: Salut, voilà. Il est donc temps de commencer à parler des formulaires React Hook. Donc, si vous créez un formulaire Google React Hook, vous serez redirigé vers cette page Web, ou vous trouverez ce lien sur google.com ou sur n'importe quel moteur de recherche favori de votre choix Donc reacthokfm.com. C'est le site web ici. N'oubliez pas de noter les traits d'union ici. D'accord ? Maintenant, c'est ce que nous allons utiliser ici, et vous pouvez voir que c'est une solution flexible, complète et facile à utiliser avec validation pour les formulaires React. D'accord ? Il y a beaucoup de fonctionnalités qu'ils mettent en évidence ici. Ils ont également une version sandbox de code que vous pouvez modifier et utiliser, d'accord ? Et vous pouvez voir les fonctionnalités, cela isole le rendu. Il faut donc minimiser le rendu, d'accord ? Tu t'abonnes, d'accord ? La performance est donc un aspect important de l'expérience utilisateur. Vous pouvez donc vous abonner à des champs de saisie individuels sans refaire le rendu complet du formulaire, d'accord ? Donc, ici, ça monte rapidement. Il offre donc de nombreux avantages par rapport à la gestion de formulaires traditionnelle et à React. Et si vous commencez, vous trouverez quelques extraits de code ici. D'accord ? Vous pouvez donc l'utiliser pour JavaScript, dactylographié, d'accord, selon vos besoins C'est bon. Je vais donc sélectionner JavaScript ici parce que vous utilisez React. Et ici, vous pouvez l'installer de cette façon. C'est donc une bibliothèque externe que vous utilisez et en utilisant le gestionnaire de packages NPM, vous pouvez l'installer sur votre système et l'ajouter à votre projet ici D'accord. Maintenant, voici quelques points que vous devez garder à l'esprit pour savoir comment cela fonctionne. Donc, la première chose à faire est que si vous avez créé un formulaire, OK. Tout d'abord, vous devez importer ce hook. OK, tu dois ajouter ce crochet. Ensuite, vous devez obtenir ces fonctions en fonction de ce que vous voulez, d'accord ? Donc, enregistrez la fonction. Il existe différentes fonctions que vous obtenez avec use form et use form avec React Hook Form ici. D'accord. Maintenant, le registre est quelque chose qui vous permet d' enregistrer un élément d'entrée ou n'importe quel type d'élément, essentiellement pour réagir à des formes de crochet. Et lorsque vous vous inscrivez, ce qui se passe, c'est la validation et tout est géré, même la soumission est gérée par React Hook Forms. D'accord ? Donc, s'inscrire est un moyen de demander à React Hook Forms de gérer cet élément particulier pour vous dans le formulaire, d'accord ? Il gère également la soumission. Vous avez donc ici handle submit comme vous pouvez le voir, et handle submit prend n'importe quelle fonction de votre choix que vous transmettez. D'accord ? C'est donc une fonction que nous transmettons. C'est la fonction flèche. Et quelle que soit la fonction que vous transmettez, elle est déclenchée après les validations et tout le reste par React Hoop Forms D'accord ? Et aussi, si vous voyez ici, vous êtes sur ce terrain. Vous pouvez voir que les deux points obligatoires sont vrais. D'accord ? Donc, si vous voulez que ce champ soit obligatoire, accord, vous pouvez avoir deux points sur true comme attribut ici, d'accord ? Et il est dit d'inclure la validation avec les règles de validation HTML requises, d' accord, et d'autres règles de validation HTML standard, d'accord ? Et vous pouvez afficher les erreurs de cette façon. C'est bon. Vous pouvez voir comment les erreurs sont affichées. Exemple d'erreurs requis. Vous avez donc accès aux erreurs ici. D'accord. Tout cela est donc automatiquement pris en charge, et si vous faites défiler la page vers le bas, si vous allez appliquer la validation, vous pouvez voir que ce sont tous les champs de validation. D'accord, vous pouvez voir, ce sont tous les champs de validation requis, modèle. Si vous souhaitez faire une sorte de correspondance de modèles. OK, si vous avez des règles de validation personnalisées, vous pouvez le faire. Vous pouvez définir un minimum et un maximum pour une valeur ici ou pour un champ ici. Tout cela, sans écrire trop de code, il vous suffit de spécifier ce que vous voulez et tout le reste est pris en charge. Maintenant, imaginez faire cela dans Vanilla JavaScript, n'est-ce pas ? Sans utiliser les formulaires React Hook. OK, imaginez faire ça, non ? Nous l'avons donc déjà fait dans l'une de ces applications que vous voyez ici. OK, donc je m'en sors. J'ai ce formulaire ici, et je gère tout, alors laissez-moi en plein écran, et je gère toutes les erreurs et validations ici, les messages d'erreur ici en utilisant ces fonctions, d'accord ? Et oui, pour deux champs seulement, il y a beaucoup de code, non ? Donc, ce que je vais faire, c'est un formulaire très simple que j'ai déjà. Ce que je vais faire, c'est réduire ce formulaire pour utiliser les formulaires React Hook. Et des choses comme la validation et les s apprendront tout cela ici, d'accord ? Donc oui, c'est quelque chose que nous allons aborder. D'accord ? Donc, ce que je vais faire, c' est que tout d'abord, nous devons installer React Hook Forms. Donc tu peux le copier, d'accord ? Et venez ici, dirigez-vous vers le terminal. D'accord. Et vous pouvez l'ajouter ou l'exécuter dans le répertoire racine de votre projet. Maintenant, une fois que vous aurez fait cela, il y aura un petit traitement en fonction de votre connexion Internet, vitesse et de votre système, mais il devrait être rapidement installé. Je vais minimiser cela maintenant. Et si vous venez ici pour empaqueter Jason, vous verrez des formulaires React Hook être ajoutés. Alors laisse-moi venir ici. Vous pouvez voir React Hook se former, non ? Cela a donc été ajouté à notre liste de dépendances. C'est bon. Et ce que nous devons faire maintenant, c'est créer de nombreuses fonctions pour gérer les modifications, les soumettre, les valider, etc. Nous n'avons pas besoin de tout cela. Je vais me débarrasser de tout ça. D'accord ? Je vais juste supprimer tout ça. Je vais juste réduire cet exemple ici, d'accord ? Lors de la soumission, nous transmettrons quelque chose, d'accord ? Nous n'avons pas non plus besoin de valeur. Ce champ de saisie sera donc également réduit ici. D'accord. D'accord. Donc, en fait, je vais me débarrasser de tout ça. Alors voilà. OK, ce sera un champ de saisie très simple maintenant, accord, saisie et oups Je pense donc que je vais avoir un réservoir à fermeture automatique. Je vais m'en débarrasser, d'accord ? D'accord. Et je vais devoir, en fait, me laisser faire une chose. Je vais juste avoir le bouton ici, d'accord ? Ou j'ai juste les étiquettes. Je vais supprimer ces champs de saisie ici. D'accord ? Je vais juste avoir les étiquettes. OK, j'ai donc l' étiquette ici. J'ai l'étiquette ici. OK, je vais supprimer tous les champs de saisie. Il existe un bouton d'envoi, qui est nécessaire pour soumettre le formulaire. C'est ça. Je viens de faire beaucoup de ménage. Je vais également me débarrasser de l' entrée en haut. Nous ferons de nouvelles contributions chaque fois que nous en aurons besoin, d'accord ? Je n'ai pas non plus besoin de Handle Submit, d'accord ? Maintenant, c'est un formulaire dont j'ai version allégée assez simple. D'accord. Je vais juste le supprimer. Il n'y a encore rien dans le formulaire. Je n'ai pas ajouté de champs de saisie. D'accord ? Maintenant, tout d'abord, ce que nous allons faire, c'est utiliser React Hook Form. Je vais donc dire Importer, utiliser le formulaire ici. Vous pouvez voir cette suggestion. Utilisez le formulaire de React Hook Form. Je vais donc simplement le sélectionner et vous devrez importer les éléments ajoutés. D'accord. Maintenant, ce que vous allez faire, c'est que nous avons besoin, je dirais, de const. Nous devons nous inscrire, et je dirais d'utiliser le formulaire ici. Donc, en utilisant ce hook, d'accord, je dois importer ou obtenir ces deux fonctions. Alors inscrivez-vous et je vous dirai de gérer et de soumettre, d'accord ? Voici donc les deux fonctions ou propriétés que vous pouvez définir. D'accord. Ce sont les deux fonctions auxquelles vous devez accéder, d' accord, depuis le formulaire d'utilisation. OK, et c'est ce que nous faisons ici. Donc, après avoir eu accès à ces deux fonctions telles que l'enregistrement et le traitement soumission, d'accord, nous en parlerons. Alors, qu'est-ce que le registre ? D'accord ? Pourquoi devez-vous vous inscrire ? Register est donc une fonction fournie dans le hook use form, qui est fourni pour espionner le formulaire React Hook, et elle est utilisée pour enregistrer les détails que vous souhaitez que le formulaire React Hook gère. D'accord ? Par exemple, s' il existe un champ de saisie, vous souhaiterez peut-être enregistrer ce champ en particulier avec React Hook Form. Et pourquoi souhaitez-vous vous inscrire ? Parce que vous voulez que le formulaire React Hook gère la validation, la soumission, tout. Vous voulez que React Hook Form suive les modifications dans chaque champ de saisie et tout ça. OK, à cause de ça, vous voudriez dire à React de Form gérer ce champ en particulier pour moi, n'est-ce pas ? Comment le dirais-tu ? Vous le faites à l'aide de Register, ici. D'accord ? Permettez-moi donc d'ajouter un champ de saisie ici. Je vais donc juste dire input ici, quelque chose comme ça. D'accord ? Et je vais ajouter une étiquette à fermeture automatique. Je n'en ai pas besoin. D'accord. Et ici, je dirais que je vais ajouter deux points, désolé, pas deux points. Il s'agit de crochets ronds. Je vais dire « points gratuits » et m'inscrire. D'accord. Et ici, je vais transmettre le nom, quelque chose comme ceci. C'est ainsi que vous vous inscrivez. D'accord ? Donc c'est fait, d'accord ? Nous avons ajouté register, et ce que vous pouvez maintenant faire c'est que nous aurons une fonction d' envoi, donc je peux dire const on submit submit, je vais utiliser la fonction flèche ici OK, quelque chose comme ça et je dirais console point log. D'accord ? Journal. Je dirais des données ici. D'accord ? Il s'agit donc d'une donnée de formulaire que je souhaite enregistrer ici. Maintenant, gérez « Soumettre ». Nous devons donc dire à handle submit que, hé, utilisez cette fonction pour gérer l'envoi pour moi. D'accord ? Donc, ce que je vais faire, c'est venir ici pour former, je vais dire gérer la soumission Oups. Donc 1 seconde. Je vais dire lors de la soumission, tout d' abord, lors de la soumission. D'accord. Et vous allez dire handle submit et vous allez dire on submit, quelque chose comme ça. D'accord ? C'est chose faite. D'accord ? Maintenant, ce qui se passera c'est que chaque fois que la soumission aura lieu , d' accord, cette fonction sera déclenchée avec les données. D'accord ? Voyons si cela se passe bien. D'accord ? Je vais vérifier ça. Je vais donc passer à la console. Je vais faire du hard or fresh. Je vais effacer cela et je vais dire « soumettre le test ». Vous pouvez voir le nom comme test et le nombre de lignes de code que vous avez dû écrire. D'accord ? Il vous suffisait de l'enregistrer. Tout d'abord, avant de vous inscrire, vous deviez effectuer quelques tâches administratives pour importer les formulaires relatifs aux réacteurs Vous avez accès à ce registre et gérez le formulaire de soumission depuis l'utilisation, d'accord ? Ensuite, vous venez d' enregistrer votre nom, et maintenant vous recevez les données ici. D'accord ? Maintenant, le courrier électronique n' est pas enregistré, alors permettez-moi également d'ajouter un e-mail ici. D'accord ? Donc, si je dis e-mail, d'accord. Et c'est un e-mail pour moi, d'accord. Et si je n'enregistre pas ce champ de saisie, il ne fonctionnera pas, mais je dois m'inscrire. Je vais donc dire trois points, quelle est la syntaxe ? Je vais voir s'inscrire, et je vais spécifier l'adresse e-mail ici. Je vais enregistrer ça. Au moment où vous le faites, si vous actualisez, si je soumets, vous verrez le nom et l'e-mail vides. D'accord ? Maintenant, quelles que soient les modifications apportées, d'accord, test et A, vous verrez les deux apparaître dans les données. D'accord ? Tu ne fais presque rien. Vous ne gérez pas les États, vous ne faites rien. D'accord ? Vous venez de dire React Hook Forms qui, hé, enregistrent ceci et s'en occupent pour moi. D'accord ? Maintenant, React Hook Form fait tout pour moi, pour vous, essentiellement. Vous avez « on submit », vous dites « handle submit ». Il s'agit du handle submit from React Hook form, et vous donnez la fonction qui doit être déclenchée lors de la soumission, d'accord ? Parce que vous avez peut-être une soumission personnalisée ou une méthode personnalisée de soumission des données, n'est-ce pas ? Vous voudrez peut-être passer un appel EPI ou quelque chose comme ça. Donc, une fois toutes les validations terminées, OK, cette fonction est appelée avec les données C'est bon. Donc pour tout dire ou pour tout résumer, d'accord ? Use form initialise la gestion des formulaires avec React Hook Form D'accord ? C'est ce que nous faisons. Inscrivez-vous, nous les utilisons pour enregistrer les champs de saisie pour la gestion du formulaire. Handle submit gère les soumissions de formulaires et collecte les données du formulaire pour nous. Et on submit est une fonction personnalisée qui est déclenchée lors de la soumission du formulaire et qui enregistre simplement les données du formulaire. accord ? Maintenant, l' utilisation des formulaires React Hook présente de nombreux avantages, d'accord. Le premier avantage que vous pouvez tirer de ce code est moins de code standard. Vous n'avez pas besoin d'écrire beaucoup de code pour que vos formulaires soient opérationnels. Moins de code standard, et votre composant a également l'air simple, n'est-ce pas ? De meilleures performances. Désormais, de meilleures performances permettent minimiser le rendu à chaque changement de valeur Donc, s'il y a un quelconque changement de valeur, si vous changez quelque chose dans le champ ici, d'accord ? Dans le traitement traditionnel des formulaires et la réaction, le composant est rendu à nouveau. Mais dans React to Forms, le composant est que le formulaire n'est pas rendu à chaque fois que vous tapez dans un champ, ce qui accélère votre formulaire, en particulier pour les applications volumineuses. Les validations sont simplifiées. Nous n'avons pas encore abordé les validations, mais des choses comme vérifier si un champ est rempli ou si l' e-mail est valide Tous ces types de validations standard sont intégrés. Il vous suffit d'ajouter un mot, et de dire à React Hook Forms que « Hé, faites ce type de validation, et c'est tout ». C'est le cas pour toi, non ? Vous n'êtes pas obligé d'écrire des choses manuellement pour ces éléments standard, n'est-ce pas ? Donc, dans l'ensemble, cela rend la gestion des formulaires très facile. Il facilite la collecte des données de formulaire, le suivi de celles-ci et vous n'avez pas besoin de mettre à jour manuellement l'état pour chaque champ de saisie comme vous faites avec les formulaires React classiques. C'est bon. Bref, cela vous facilite beaucoup la vie. D'accord ? J'espère que vous êtes impressionné par les formulaires React Hook, et oui, nous allons beaucoup explorer cette question. Et il est couramment utilisé. Vous le verrez donc également dans de nombreux projets. 5. Informations en temps réel : surveiller les valeurs des formulaires avec React Hook Form: Salut, voilà. Il est donc temps de commencer à parler de l'observation des valeurs avec React Hook Forms. Maintenant, que signifie observer les valeurs avec les formulaires React Hook ? Il y aura donc des scénarios dans lesquels vous voudrez garder une trace de la valeur que l'utilisateur donne en entrée au fur et à mesure qu'il tape, n'est-ce pas ? Et vous voulez que ce soit le cas, vous voudrez peut-être que ce soit un peu en temps réel, n'est-ce pas ? C'est donc là que la montre entre en scène. Alors, qu'est-ce qu'une montre ? La montre est une fonction, comme vous pouvez le voir sur l' exemple ci-dessous, d'accord ? Il nous est fourni par le formulaire React Hook, et en l'utilisant, vous pouvez observer n'importe quelle valeur, d'accord ? Maintenant, chaque fois que vous enregistrez un champ, d'accord, vous lui donnez un nom, n'est-ce pas ? Donc, lors de l'enregistrement, vous dites enregistrer ce champ, et c'est le nom du champ avec lequel je veux l'enregistrer. OK ? Donc, ici, dans cet exemple sur le site Web, vous pouvez voir que le champ de saisie est enregistré comme exemple de nom, n'est-ce pas ? Donc, vous importez la fonction de montre ici, puis vous dites « watch example ». Maintenant, chaque fois que vous tapez quelque chose dans le registre ici dans cette entrée de registre, cela se déclenchera et la montre aura la dernière valeur de ce que vous faites. Il s'agit donc essentiellement de garder un œil sur ce qui se passe avec cette entrée et sur la valeur qui en sort. Essayons cela de manière pratique pour mieux comprendre. Je vais donc passer à notre application. Nous avons cette application simple dans laquelle nous utilisons des formulaires de réaction. Quelques champs que nous utilisons Input, nom et e-mail de saisie. OK ? Maintenant, le nom est enregistré avec ce nom ici, et l'e-mail est enregistré avec le nom e-mail. accord ? Maintenant, comment observons-nous la valeur ? Donc, tout d'abord, la première étape est de saisir la montre ou d'ajouter une surveillance ici, d'accord ? Et puis ici, ce que nous pouvons faire, c'est que je peux dire « regardez » et ici, je peux dire un nom, quelque chose comme ça. Je veux regarder le nom. Je peux attribuer la valeur ici à une variable ou me laisser simplement enregistrer la valeur. Voyons ce qui va se passer. OK ? Je vais donc dire console. Oups, la console point log par ici, et quelque chose comme ça OK. Laisse-moi juste économiser. Vous pouvez voir l'indéfini arriver. OK. Maintenant, en tant qu'iPane, vous pouvez voir la montre se déclencher Tu peux voir, non ? La montre se déclenche. Quoi que je tape , vous pouvez le voir, comme le résultat ici sur la console. C'est une montre pour toi, non ? C'est donc une montre. Maintenant, vous avez un autre champ ici, qui est le courrier électronique, n'est-ce pas ? Maintenant, même si un e-mail est saisi, d'accord ? Je suis en train de taper un e-mail ici. OK. Il n'y a donc pas de surveillance des e-mails ici, non ? Vous pouvez donc également ajouter une surveillance pour les e-mails, et vous pouvez le faire en utilisant la même syntaxe, n'est-ce pas ? Maintenant, plutôt que d'avoir la valeur du nom enregistrée de cette façon, je vous recommande d' utiliser use effect, use effect hook. Donc, ce que je ferais normalement, c'est commenter cela. OK. Permettez-moi de commenter cela. Je dirais que Const a regardé le nom ici, accord. Et je vais l'attribuer à la montre et je vais dire le nom. OK. Nous voulons donc utiliser l'effet d'usage. Je dirais « const, j'ai regardé ». Envoyez un e-mail ici et je dirais « regardez le courrier électronique ». Je surveille donc les deux terrains ce moment. C'est ce que je veux faire. Ce que je vais faire, c'est utiliser l'effet d'usage. Maintenant, il y a une raison pour laquelle j' utilise l'effet d'utilisation, car je veux la journalisation de la valeur des noms séparée de ma logique de rendu, juste ici. Et l'utilisation de l'effet d'usage est une bonne pratique pour tous ces types d'effets secondaires. Je vais utiliser l' effet d'usage. Il s'agit d'une syntaxe. J'ai une fonction flèche ici, comme celle-ci, et j'ai une dépendance E comme ça. O Il s'agit d'une syntaxe. OK. Ce que nous allons faire, c'est ici dans cette logique particulière, je dirais se connecter ici, journal de la console, et je dirais valeur du nom, nom, et je dirais nom regardé, quelque chose comme ça. OK. Et je vais m'en débarrasser et ici je vais dire le nom de la montre. Ainsi, chaque fois que le nom de la montre change, ce crochet d'effet d'utilisation fonctionne et imprime la valeur du nom de la montre. Vous pouvez avoir un autre crochet comme celui-ci, ajoutez-le ici. OK ? Et cela pourrait être lié à un e-mail. Courrier électronique. OK. Vous pouvez donc dire e-mail regardé, e-mail surveillé, quelque chose comme ça. Maintenant, je vais rafraîchir, vous pouvez dire nom comme vous pouvez dire j'aime, réagir. Vous voyez que le nom est imprimé ici. Email, vous pouvez dire e-mail à t example.com. Vous pouvez ainsi voir comment vous surveillez les valeurs et si vous les soumettez, vous verrez les données être imprimées. Maintenant, la question est de savoir ce qui se passe. OK. La question est donc de savoir ce qui se passe et pourquoi vous voudriez utiliser une montre. Quels sont les vrais cas d'utilisation ? OK ? Tout d'abord, lorsque vous enregistrez le champ avec les formulaires React Hook, vous l'enregistrez en fait en utilisant un nom, n'est-ce pas ? Le nom ici est le nom et ici, le nom est l'e-mail. OK ? formulaire React Hook identifie donc ce champ comme nom et e-mail. Maintenant, lorsque vous voulez regarder les valeurs, vous pouvez les importer ou obtenir cette fonction depuis le formulaire du réacteur et vous pouvez les regarder de cette façon. Maintenant, toute modification sur le terrain déclenchera cette mise à jour ici, et ce , en temps réel. OK ? Maintenant, si vous souhaitez afficher ces champs, je vous recommande d' utiliser Effecto ici. Parce que cela sépare l'impression des valeurs de la logique de rendu, d'accord ? Maintenant, pourquoi voudriez-vous en faire usage ? OK ? Donc, la première chose à faire est le rendu conditionnel. Vous pouvez donc veiller au rendu conditionnel de certaines parties de votre formulaire en fonction des valeurs saisies par l'utilisateur OK ? Par exemple, afficher ou masquer champs supplémentaires en fonction de la sélection électronique. OK ? Donc ce genre de choses, s'il y a différents types de champs ici. Nous avons donc ici des informations. Si vous avez sélectionné ici une liste déroulante ou un bouton radio. Ensuite, vous pouvez observer la valeur de ce qui se passe. Et en fonction de ce que l' utilisateur sélectionne, accord, vous pouvez afficher le formulaire de manière conditionnelle Et c'est en temps réel avant même que les données ne soient soumises. Hein ? Il s'agit donc d'un cas d'utilisation. Validation en direct, vous voudrez peut-être avoir une validation en direct ici pendant que l'utilisateur tape le nom, d'accord ? Et s'il saisit ou essaie de saisir un chiffre, vous voudrez peut-être afficher immédiatement un message d'erreur indiquant que le numéro n'est pas autorisé. Par exemple, le nom ne peut pas être numérique. Vous pouvez donc effectuer tous ces types de validations en direct ou afficher des indices au fur et à mesure que l'utilisateur tape Donc, si l'utilisateur saisit un titre, disons que le titre est un champ. Et si vous tapez un titre très long, vous pouvez avoir l'impression qu'il fait plus de dix caractères, d' accord, ce n'est pas recommandé, quelque chose comme ça, non ? Ce n'est pas une erreur, mais une suggestion à un utilisateur ou un indice façon dont vous pouvez améliorer le titre de votre formulaire, par exemple, d' accord ? Formulaires complexes. Donc, si vous avez des formulaires complexes, vous pouvez utiliser Watch pour formulaires en plusieurs étapes afin de surveiller et de valider les données à chaque étape avant de continuer et avant même que le formulaire ne soit soumis. Voici donc quelques-uns des cas d' utilisation directe de la montre, d'accord ? Et je crois que vous pouvez imaginer à quel point c'est utile, non ? Et c'est très utile car il est assez efficace en temps réel et très facile à utiliser avec un minimum de code. Nous avons littéralement écrit très moins de code, d'accord. Ce code sert littéralement à imprimer les valeurs, d'accord ? Ce n'est pas nécessaire si vous ne voulez pas imprimer, mais c'est littéralement ce que c'est. OK, vous venez de recevoir une montre et vous utilisez la fonction montre ici, n'est-ce pas ? J'espère que cela vous sera utile. Et ici, avec US Effect, ces deux hooks d'effets américains sont séparés car ils sont déclenchés lors du changement du nom de la montre et lors du changement d' e-mail de la montre. C'est bon. J'espère donc que cela vous sera utile et j' espère que vous avez pu suivre. 6. Expérience utilisateur fluide : ajouter des validations sous forme de React Hook: Il est donc temps de commencer à parler de validations avec React Hook Form Maintenant, comment fonctionne la validation ? Les validations fonctionnent donc de manière très simple avec très peu de code standard, d'accord ? Vous pouvez également définir règles de validation lors de la définition des champs. Par exemple, ici sur mon écran, je suis sur la page Get Started du formulaire React Hook, et ici vous voyez cet exemple. OK, c'est le premier exemple que tu vois. Cela inclut une validation de base. Tu peux voir. Il est donc dit d'inclure la validation avec règles de validation HTML requises ou toute autre règle de validation HTML standard. Et vous pouvez voir comment cela inclut la validation. Il s'agit d'abord d'enregistrer le champ ici. OK ? Et puis il est dit que c'est vrai. OK ? Maintenant, cela enregistre ce champ et indique également au formulaire React Hook que, hé, ce champ nécessite une valeur. L'utilisateur ne peut donc pas contourner ce champ ou soumettre le formulaire sans transmettre une valeur pour ce champ. OK. Maintenant, si le champ n' est pas rempli , ou si aucune valeur n'est trouvée ici, et s'il y a une erreur de validation, vous obtenez l'objet d'erreur, vous avez accès à l'objet d'erreur, comme vous pouvez le voir ici. OK ? Maintenant, cet objet d'erreur fait partie du formulaire Use Hook, et c'est une fonctionnalité puissante qui est utilisée pour gérer et afficher les erreurs de validation pour les champs du formulaire. OK ? Cet objet va donc garder une trace de toute erreur de validation qui se produit lorsque l'utilisateur remplit le formulaire, d'accord ? Et chaque champ de formulaire aura sa propre entrée dans l'objet des erreurs, ce qui permettra d'identifier facilement quel champ pose problème et quel est ce problème. OK. Maintenant, comment ça marche ? Ainsi, lorsque l'utilisateur soumet le formulaire. Donc, ici, j'ai enregistré la validation comme vraie. OK, j'ai besoin de la réponse vraie, et j'ai les erreurs ici, d'accord ? Désormais, lorsque l'utilisateur soumet le formulaire, le formulaire de réaction vérifie les valeurs d'entrée par rapport aux règles de validation que vous avez indiquées. C'est donc une règle de validation que j'ai définie ici dans cet exemple, d'accord ? Maintenant, dans cet exemple, nous exigeons que ce champ ne soit vide et l'utilisateur soumet un champ vide. L' erreur de validation est donc déclenchée et l'objet d'erreur ici est mis à jour, d'accord ? Et le message d'erreur de validation est ajouté ici. OK ? Et c'est affiché ici. Tu peux voir ? Donc, aucun exemple d'erreur n'est requis. Donc, si cela a une valeur, affichez ce message d'erreur. Vous pouvez voir comment il est affiché. OK ? Voici donc comment vous pouvez utiliser les validations ici. OK ? Alors laissez-moi vous donner un aperçu de ce qui se passe ici. OK ? Maintenant, je vais passer à notre base de code. OK. Et nous avons ici un formulaire très simple. Nous enregistrons deux champs ici. OK. Et ces deux champs, ce qu'ils font, c'est essentiellement des champs de saisie comme le nom et l'e-mail ici. OK ? Maintenant, ce que nous ferions , c'est d'abord moi qui viendrais ici. Lors de l'enregistrement de l'e-mail, désolé, pas de courrier électronique, je vais enregistrer le nom ici. Lors de l'enregistrement, conformément à la syntaxe ici, vous pouvez voir la syntaxe. Lors de l'inscription, vous transmettez un autre paramètre avec les règles de validation, n'est-ce pas ? Je vais donc simplement le copier. OK. Vous pouvez le copier d'ici. Vous venez ici et vous pouvez le coller dedans. OK ? Ce qui est requis est donc vrai ici. OK ? Maintenant, une fois que c'est vrai, vous devez accéder à l'objet d'erreur, n'est-ce pas ? Vous pouvez donc dire état du formulaire ici, état du formulaire, refroidir, et vous aurez des erreurs, quelque chose comme ça. OK ? C'est donc quelque chose que nous avons maintenant, n'est-ce pas ? Et maintenant, ce que vous pouvez faire, c'est en dehors de l'étiquette, d'accord, vous pouvez avoir des erreurs qui s'affichent. Erreurs apprises, vous pouvez dire le nom, d'accord. Alors un nom, car qu' est-ce qu'un nom de champ ? Le nom du champ est name. OK ? Vous pouvez donc dire le nom du point d'erreur, et je vais afficher le message ici. OK ? Donc je peux dire P, et je peux dire que le nom est obligatoire, quelque chose comme ça, d'accord ? Je vais enregistrer ça. Je vais appuyer sur Actualiser. OK ? Si vous soumettez, vous verrez que le nom est obligatoire, n'est-ce pas ? Qu'avons-nous fait pour cela ? Nous venons d'ajouter une propriété , nous venons d'avoir accès à l'objet d'erreur et nous affichons le message d'erreur de manière conditionnelle C'est ça. C'est ça. C'est aussi simple que cela et cela crée un code standard. Cela réduit le code standard, d'accord ? Vous n'avez donc pas besoin d'écrire beaucoup de code standard ici Il suffit de dire ce qui doit être fait et tout le reste est pris en charge. OK ? Maintenant, dans cet exemple, comment cela fonctionnait, c'est que lors de l'enregistrement, nous avons dit s' agissait d'un champ que nous enregistrons avec le nom, n'est-ce pas ? Donc, ce qui s' est passé, c'est que les erreurs sont enregistrées dans ce nom , ici, le nom du champ. Le nom du champ est donc nom, ici le nom du champ est e-mail. OK. Donc, sur cette base, les erreurs sont enregistrées ici, d'accord ? Et ils sont affichés de manière conditionnelle à l' aide de la logique et fonctionnent ici OK ? Maintenant, c'est comme ça que ça fonctionne, d'accord ? Ici, nous disons en fait que c'est vrai. Mais ce que vous pouvez faire est requis true a un message d'erreur par défaut ici, n'est-ce pas ? Ce que vous pouvez faire, c'est dire que le nom du point d'erreur est un message. Voyons quel est le message que nous allons recevoir. Vous pouvez donc voir que nous n'en voyons aucune. OK, je dois vraiment emballer ça. Comme ça. OK ? Donc ça n'existe pas, d'accord ? Maintenant, ce que nous pouvons faire est ici, au lieu de dire : OK, ce n'est pas une erreur. Ce sont des erreurs. J'en suis désolée. OK. Alors laissez-moi vous rafraîchir. Si je soumets, d'accord ? Aucun message d'erreur ne s'affiche. OK ? Maintenant, vous pouvez définir un message d'erreur personnalisé ici lorsque l'enregistrement est requis. Vous pouvez donc dire que le nom est obligatoire, d'accord ? Et tu peux le sauvegarder. Au lieu de vrai, vous transmettez le message d'erreur. Et si vous le soumettez, vous verrez le message d'erreur personnalisé s'afficher, n'est-ce pas ? C'est donc ainsi que vous pouvez également faire les choses. Il s'agit également d'un exemple dans lequel vous, au lieu de transmettre vrai, vous transmettez le message d'erreur lui-même et vous affichez les messages d'erreur de cette façon. C'est bon. C'est donc une façon de faire les choses. Maintenant, outre les exigences, il existe des scénarios dans lesquels vous souhaitez des règles supplémentaires ou des validations complexes Donc, si vous arrivez sur le site Web de React Hook Fm, ici sur le côté gauche, dans la navigation, vous devez appliquer l'onglet de validation. Cliquez dessus, et vous verrez ici une liste de toutes les règles de validation prises en charge. Vous pouvez voir la longueur minimale, la longueur maximale, tout cela, d' accord, vous pouvez contourner le problème. Vous pouvez voir le prénom, ou la longueur maximale est de 20. Longueur minimale que vous pouvez définir en fonction de la manière dont vous le souhaitez. OK. Donc ici, vous pouvez entrer et ici vous pouvez dire obligatoire, d'accord ? Euh, vous pouvez dire obligatoire, le nom est obligatoire, et je peux dire longueur minimale, longueur M, et je peux dire longueur minimale de deux, par exemple, d'accord ? Et puis ici, je vais passer à la valeur booléenne Je vais supprimer le message, et ici, je vais avoir le message comme OK, je dirai que le nom est obligatoire et doit comporter au moins deux caractères. OK ? Quelque chose comme ça. Je vais enregistrer ça. Et maintenant, si vous actualisez, si vous pouvez dire S, vous pouvez voir que le nom est obligatoire et qu' il doit comporter au moins deux caractères. Si je tape à nouveau S, vous verrez le formulaire être envoyé. OK. Donc oui, c'est ainsi que fonctionnent les règles de validation. Et sans cela, si vous ne mettez aucun nom ici, vous verrez cette validation être déclenchée, n'est-ce pas ? Donc ça marche très bien, d'accord ? Vous pouvez également le faire pour le courrier électronique, d'accord ? Vous pouvez dire que l'exigence est vraie ici. OK. Ce qui est requis est vrai, quelque chose comme ça. OK. Et, oups, il faut que ce soient des prix dici Quelque chose comme ça, d'accord ? Et ici, vous pouvez dire qu' au lieu du nom du point d'erreur, vous l'aurez ici. Des erreurs apparaissent dans les e-mails, quelque chose comme ça. OK ? Vous pouvez donc dire qu'un e-mail est obligatoire. D'accord ? Le courrier électronique est obligatoire, vous pouvez vous en débarrasser et l'enregistrer. Et maintenant, le courrier électronique est également requis. Vous pouvez voir que le nom est obligatoire, l'e-mail est requis. OK ? Vous pouvez également ajouter un style CSS si vous le souhaitez, d'accord. Mais c'est ainsi que cela fonctionnera. Et vous avez d'autres choses, comme la correspondance des motifs. OK, tu peux faire une correspondance de modèles. Vous pouvez voir ici, correspondance de modèles en action, vous pouvez spécifier le modèle que vous souhaitez faire, ce qui pourrait être très utile pour les e-mails. OK. Donc, si vous avez un e-mail ici ou modèle d' e-mail par rapport auquel vous souhaitez le valider, vous pouvez également l'exécuter. Donc, ce que nous pouvons faire, c'est pour le courrier électronique, nous pouvons avoir ce genre de modèle. OK, alors je vais venir ici. OK. J'ai besoin d' un e-mail ici. OK. Obligatoire, je l' ai précisé. Je vais dire modèle, quelque chose comme ça, je vais avoir ceci et je vais spécifier ce modèle. Je vais créer ce patron. Il s'agit donc d'un modèle qui existe pour la validation des e-mails. OK, j'ai ajouté ce modèle. Vous pouvez faire des recherches normales sur Google et obtenir ce type de modèle, accord, ou je partagerai ce code avec vous tous pour cela Et si vous sauvegardez ceci, d'accord, laissez-moi rafraîchir. Si je soumets, un e-mail est requis. Je tape ceci, je tape ceci. Néanmoins, un e-mail est requis. Vous pouvez voir que l'e-mail n'est pas valide. Donc, si je tape ceci, d'accord, e-mail n'est toujours pas valide. Je peux dire .com, et alors cela devrait probablement fonctionner. Vous pouvez voir que le message d'erreur a disparu. Cet e-mail doit donc être valide, qu'alors qu'il fonctionnera. C'est bon. Il s'agit donc d'un modèle Javascript pour valider les e-mails, et je le cherche et je l'ai trouvé ici Donc, une chose que je veux souligner pour le nom ici, vous voyez ce message complet indiquant que le nom n'est pas un nom est obligatoire, et qu'il doit également comporter deux caractères, d'accord ? Mais ici, je veux juste souligner le message selon lequel il devrait y avoir deux caractères. Et si c'est vide, je veux le surligner comme si le nom était requis. OK. Donc, en fonction de l' erreur commise par l'utilisateur, je souhaite mettre en évidence ce message d'erreur. C'est donc également possible. Je vais vous montrer comment cela peut être fait. OK. Donc, ce que je vais faire ici, c'est juste commenter cela ici. OK. Je vais le dupliquer, d'accord ? Parce que je ne veux pas supprimer celui-ci. Je veux que tu y aies accès. OK, maintenant par ici, je dois m'inscrire. OK. Maintenant, dans le registre, je transmets obligatoire ici, requis comme ça. OK. Obligatoire est vrai. La longueur minimale est de deux. OK ? Maintenant, je vous avais dit qu'au lieu d'être obligatoire, vous pouvez faire passer le message, vous savez que vous pouvez transmettre le message ici, accord ? Attends une seconde. Je reçois un message d'erreur. Je ne sais pas pourquoi. 1 seconde Oups, j'ai raté les bretelles de fermeture ici. Je ne l'ai pas copié. C'est bon. C'est tout à fait normal. Ça arrive. Tu sais, je vais juste le fermer. OK. Oui. Ainsi, lorsque vous utilisez required, vous pouvez spécifier le message d'erreur. Je vais donc revenir à cette méthode. Je vais dire le nom. Oups. Je dirais que le nom est obligatoire, quelque chose comme ça. D'accord ? Maintenant, comment le spécifiez-vous pour la longueur ? D'accord ? Donc je vais l'avoir ici. Je vais me débarrasser de ce message. Je vais dire erreur, tot, nom, point, message, d'accord ? Je l'ai maintenant. D'accord ? Ce n'est donc pas une erreur, ce sont des erreurs. D'accord. N'oubliez pas d'avoir le bon nom d'objet ici. D'accord. Maintenant, ce que je peux faire, c'est que je peux faire mentionner à nouveau une paire clé-valeur ici, au lieu de deux pour une longueur minimale ici. OK. Je peux dire que cela fonctionnera, c'est une longueur minimale. Je vais m'en débarrasser de deux ici. Je vais ajouter Curly Pass ici. Et je dirais valeur. OK, il y a une propriété de valeur, je dirais 20. D'accord. Et je vais envoyer un message ici. Quel est le message que tu veux avoir, d'accord ? Je veux avoir un message car le nom doit comporter au moins deux caractères. Je vais copier ce message. Je dirais que le nom doit comporter au moins deux caractères. Terminé. Sauvegardez ceci. Maintenant, actualisez, et maintenant tapez a, je dirais a à ate gmail.com Je ne souhaite voir aucun message d'erreur par e-mail. Donc a@gmail.com, si je soumets, vous verrez que le nom doit comporter au moins deux caractères, n'est-ce pas ? Si je le supprime, le nom est obligatoire. Le nom doit comporter au moins deux caractères. Si je tape complètement et si je soumets, il doit comporter au moins deux caractères. Oups, j'en ai fait 20. Je suis désolée Je vais le sauvegarder à nouveau. Si je soumets, vous verrez les données soumises. Mais si vous réduisez ce nombre, les noms doivent comporter au moins deux caractères. Si vous le supprimez, le nom est obligatoire. Vous pouvez voir à quel point c'est dynamique. C'est une autre façon de faire les choses, d'accord. Je vais faire un petit zoom arrière, ou je vais simplement passer en plein écran. D'accord ? Vous pouvez voir le nom et le message. Permettez-moi de faire la queue. Permettez-moi de clore la page. D'accord, vous pouvez voir comment c'est structuré. Vous êtes donc en train de vous inscrire ici, en enregistrant le nom. Vous dites que c'est obligatoire, le nom est obligatoire. D'accord ? Si nécessaire, c'est un message que vous avez reçu, d'accord ? Pour la longueur minimale, vous dites que la valeur est deux, mais je veux aussi avoir un message. Vous l'avez donc transmis en tant qu'objet, qui est une paire clé-valeur ici, accord, vous pouvez le voir, et il prend maintenant un objet avec plusieurs règles de validation. Register a en fait le premier paramètre comme nom du champ, d'accord ? Le deuxième paramètre est en fait un objet ici. C'est l'objet entier, moi. Donc, de cette collibrase à cette collibrase. C'est l'objet entier qui est transmis pour enregistrement en tant que deuxième paramètre. Et à l'intérieur de cela, il y a aussi cette longueur minimale, où nous disons que la valeur est deux et que le nom doit comporter au moins deux caractères. Quel que soit le message d'erreur qui arrive, il s' affiche ici. Et vous pouvez voir à quel point c'était dynamique, d'accord ? Ce sont toutes des règles standard, n'est-ce pas ? Longueur minimale, longueur maximale, tout ce que vous voyez ici, longueur minimale, longueur maximale, d'accord, minimum max, modèle, vous savez, validez. C'est donc le maximum et le minimum requis. Tout cela est standard, non ? Pourquoi écririez-vous du code pour cela dans votre application, dans tous les champs de chaque composant Donc, si vous utilisez une application dédiée à Farm Heavy, imaginez à quel point elle sera fastidieuse pour vous Hein ? Et imaginez utiliser des formulaires React Hook dans une application riche en formulaires. Imaginez-vous en train de faire ça, d'accord ? Il offre donc toute la flexibilité. Vous pouvez valider les choses de cette façon, d'accord ? Vous pouvez même valider les choses de cette façon. OK ? Je ne veux pas transmettre de message. Je souhaite avoir un message standard pour toutes les règles de validation. Tu peux le faire. Je vous ai montré comment vous pouvez le faire, n'est-ce pas ? C'est ce qui fait la beauté de React Hook Forms. C'est vraiment une façon incroyable de gérer les formulaires dans React. D'accord ? J'espère que cela vous plaît et j'espère que vous trouverez toutes les connaissances que vous acquérez grâce à cette conférence utiles, d'accord ? React Forms a donc intégré des règles de validation telles que la longueur minimale, la longueur maximale, tout ce que nous voyons ici, d'accord ? Vous pouvez également avoir des fonctions valides personnalisées pour une logique de validation complexe. Par exemple, si vous pensez avoir besoin de quelque chose de plus, vous pouvez écrire vos propres fonctions. D'accord. Mais c'est au-delà de ça, non ? Vous pouvez gérer les erreurs par le biais de l'objet d'erreur. D'accord ? Vous avez accès à l'objet d'erreur et vous pouvez jouer avec l'objet d'erreur. Performances, la réaction au formulaire est optimisée pour les performances, en particulier pour les formulaires plus volumineux. C'est bon. J'espère donc que vous trouvez cela utile et j' espère que ce sont des informations précieuses pour vous tous. 7. La vitesse est importante : comparer les performances des formulaires de base et du formulaire React Hook: Comparons donc maintenant les performances d' formulaire normal ou d'un formulaire de base qui n'utilise pas les formulaires React Hook. J'ai donc le code d' un formulaire de base ici, et nous n'utilisons pas de formulaires React Hook ici. C'est bon. Donc, une chose, j'ai oublié de supprimer cette entrée. Il s'agit donc de l'entrée pour les formulaires React Hook. Donc, dans cette forme particulière, nous n'utilisons pas React a pris des formes, comme je l'ai dit. C'est un formulaire très basique avec e-mail, nom, et nous utilisons on handle submit et on change event lesna ici, et la valeur est comme liée à cet état ici. OK. Et vous avez cet énorme effet hook qui nous permet de savoir quand le formulaire est réellement rendu ou combien de fois il est rendu à nouveau, n'est-ce pas ? Je n'utilise donc pas de tableau de dépendances ici, et comme je n' utilise pas de tableau de dépendances, cela sera déclenché à chaque nouveau rendu. Et j'ai ceci sur le handle change, qui consiste à s'assurer que la valeur est mise à jour dans les états pour chaque changement. Et j'ai ce pseudo submit pour gérer l'envoi. Passons maintenant à la version ici, si je rafraîchis, vous verrez le formulaire de base rendu deux fois, et cela est, bien sûr, dû au vous verrez le formulaire de base rendu deux fois, mode strict. D'accord ? Donc c'est tout à fait normal. Je vais zoomer un peu. OK. Maintenant, je vais venir taper quelque chose ici, donc je dirais que vous pouvez voir chaque fois que je tape, j'adore réagir. Chaque fois que je tape, le formulaire s'affiche à nouveau. Il s'est donc refait 14 fois au fur et à mesure que j'ai tapé 14 caractères. D'accord ? Si je tape un e-mail, il s'affichera à nouveau. Tu peux voir. Et ce n'est pas efficace en termes de performances. Si je le soumets, d'accord, je reçois un message d'erreur, mais laissez-moi le supprimer et le soumettre. Vous pouvez voir que les données sont soumises, mais après un long processus de rendu. Ce n'est donc pas optimisé pour les performances. Ce n'est pas bon. Il y a beaucoup de rendus qui se produisent, ce qui peut être évité. D'accord ? Maintenant, dans ce même exemple, nous pouvons utiliser formulaires React Hook et React Hook Form peut gérer cela manière très efficace et efficiente avec un minimum de code. Vous êtes donc en train d'écrire une telle quantité de code. Vous pouvez voir près de 50 lignes de code, mais cela peut être minimisé avec les formulaires React Hook Maintenant, ici, j'ai converti cet exemple en forme de crochet de réaction. J'utilise le formulaire React Hook ici, vous pouvez le voir, et très moins de code. Et ici, j'ai deux champs, nom et e-mail. J'enregistre ces deux champs et j'ai à nouveau un hook d'effet d'utilisation sans tableau de dépendances pour imprimer le rendu sous forme de crochet. J'ai également une fonction de soumission, qui est transmise de cette façon ici. Voyons comment fonctionne le rendu ici. Si je viens ici, vous pouvez voir React Hook Form rendu deux fois. Bien sûr, cela est dû au mode strict. Maintenant, si je tape, j'adore réagir. OK. Vous pouvez voir qu' aucun nouveau rendu n' est en cours. D'accord ? Vous pouvez également saisir un e-mail, mail.com, et vous pouvez envoyer les données Vous pouvez voir qu'aucun nouveau rendu n'a eu lieu. C'est donc beaucoup plus efficace. Le formulaire React ok minimise le rendu ici. Il ne restitue pas le composant, et c'est l'avantage de l'utilisation des formes React Hook. Maintenant, cette différence de rendu est très importante. Si vous créez de grands formulaires complexes, des formulaires d'intégration complexes ou des formulaires complexes dans votre candidature et que votre candidature est lourde de formulaires Cela aurait alors beaucoup d'importance à long terme , car si vous utilisez un formulaire de base, vous aurez tout d' abord beaucoup de code standard. Ce serait difficile à gérer. Il y a beaucoup de rerendu et les performances ne sont pas optimisées, n'est-ce pas ? Mais avec les formulaires React Hook, vous pouvez voir moins de code. D'accord, tu dois écrire moins de code. Une grande partie du code standard est réduite, et React Hook Form offre avantages en termes de performances en réduisant les rendus inutiles, ce qui le rend plus efficace pour la gestion des formulaires, en particulier dans votre cas d'utilisation où vous avez une application plus importante. accord ? J'espère donc que cette démonstration vous a été utile, et j'espère que cela vous a permis de mieux comprendre la différence et l' importance des formes basiques par rapport aux formes React. Et j'espère que vous comprendrez à quel point les formulaires React sont importants et qu'ils ajoutent de la valeur. 8. Réinitialiser et rafraîchir : maîtriser la gestion des états de formulaire: Il est donc temps de commencer à parler réinitialisation et de la manière dont vous pouvez ajouter une fonctionnalité de réinitialisation à l'aide des formulaires React Hook ? Maintenant, la réinitialisation est l'une des fonctionnalités que vous voudrez peut-être proposer ici. Donc, dans ce formulaire en particulier, vous voudrez peut-être avoir un bouton de réinitialisation. De plus, une fois les données soumises, vous souhaiterez peut-être réinitialiser le formulaire et effacer toutes les valeurs afin que l' utilisateur puisse commencer par une nouvelle soumission s'il le souhaite. C'est bon. Alors, comment ferais-tu ça ? Ainsi, avec React Hook form, c'est aussi simple que d' appeler une fonction. Les formulaires React Hook proposent donc cette fonction de réinitialisation que vous pouvez ajouter ici, d'accord ? Et tu peux t' en servir. C'est bon. Donc, lors de la soumission, nous enregistrerons les données. OK ? J'ai donc ce formulaire très simple, dont le nom est enregistré dans le formulaire de réaction avec cette validation. Vous avez un e-mail ici, qui effectue ces validations ici, puis vous avez également des erreurs que vous affichez, et vous avez un bouton qui est Soumettre Et vous gérez l'envoi de cette façon, vous enregistrez simplement les données. OK ? Maintenant, lors de la soumission, je souhaite également que les données soient réinitialisées, car ce qui se passe en ce moment, c'est si je soumets, si je dis A et si je dis A sur chmail.com, OK OK, donc je peux le dire et je vais dire ABC. Cela ne réinitialise pas le formulaire ici , vraiment, n'est-ce pas ? Donc, ce que vous pouvez faire ici, c'est que je réinitialiserais le formulaire. OK ? Donc, ce que je ferais, c'est d'ajouter d'abord une paire de presses bouclées OK ? C'est fait. Et puis ici, j'appellerais cette fonction de réinitialisation. Je dirais réinitialisation. Et je dirais que je vais l'appeler ainsi. OK. Et cela réinitialiserait le formulaire après la soumission. Donc, ce que vous pouvez faire ici, c'est, d'accord, je peux dire tester, et je peux dire tester sur mail.com Si je dis envoyer, cela efface toute la valeur et réinitialise le formulaire Vous pouvez voir que la soumission est terminée et que la valeur est effacée. OK ? Vous pouvez également ajouter un bouton. Ici, le bouton est ajouté, qui est utilisé pour soumettre le formulaire ici. OK. Ce que vous pouvez faire ici c'est créer un bouton de réinitialisation. Vous pouvez dire « réinitialiser » ici. Le type est un bouton, je vais donc le sélectionner. Je vais dire bouton. Et vous pouvez dire qu'en cliquant ici, cliquant, vous pouvez ajouter une fonction flèche et vous pouvez appeler la réinitialisation. Vous pouvez donc dire « réinitialiser » et vous pouvez l'appeler ici. OK, quelque chose comme ça. Il s'agit d'un bouton de réinitialisation. Maintenant, ce qui se passerait, c'est que si vous tapez quelque chose, OK. Oups, désolée. Donc, si vous tapez quelque chose, vous pouvez le réinitialiser, non ? Si vous tapez quelque chose ici, quoi que ce soit ici, vous voulez réinitialiser le formulaire dans son intégralité, vous avez cette partie de réinitialisation. OK ? C'est donc un avantage de la réinitialisation ici. C'est aussi simple que de faire un appel de fonction ici et d'effacer toutes les valeurs. Vous pouvez effectuer l'appel de fonction depuis votre fonction Jascript que vous êtes en train de définir, accord avec la fonction de soumission, ou vous pouvez même le faire en l'utilisant, sur ClickList now C'est bon. J'espère donc que cela vous sera utile et j' espère que vous en avez tiré des informations. 9. Retours personnalisés : créer des validations personnalisées dans React Forms: Donc, en ce moment, j'ai un formulaire qui utilise des formulaires React Hook, et j'ai quelques champs dans le formulaire, comme s'il s'agissait d'un formulaire. J'ai un nom, et j'ai aussi un e-mail ici. OK ? Maintenant, la validation que j'utilise ici est assez simple. Par exemple, j'ai besoin que le nom soit obligatoire, et la longueur minimale requise est de deux. Ici, l'e-mail doit être obligatoire, et c'est un modèle que je souhaite suivre pour savoir si l'e-mail est valide ou non. OK ? C'est donc une validation que j'ai déjà, d'accord ? Maintenant, les validations que j'ai sont des validations courantes et standard, n'est-ce pas ? Lorsque vous créez des formulaires, il existe des scénarios lesquels vous souhaitez intégrer une sorte de logique de validation personnalisée dans les champs de votre formulaire, adaptée à votre application. OK ? Maintenant, dans ce cas particulier, il existe une option appelée valider qui vous permet d'ajouter de telles vérifications personnalisées dans vos formulaires. Maintenant, par exemple, permettez-moi de vous donner un exemple ici. Supposons que je souhaite que les utilisateurs ayant le nom Edmin soumettent uniquement ce formulaire Maintenant, il s'agit d'une vérification personnalisée spécifique à mon application, et ce n'est pas quelque chose de courant ou de générique, n'est-ce pas ? Alors, comment ajouteriez-vous cela ici ? C'est donc là que les options de validation entrent en jeu. OK. L'option de validation prend donc une fonction qui renvoie vrai et renvoie un message d'erreur si la validation échoue. OK ? Le retour est donc vrai si la validation est réussie. C'est bon. Voyons maintenant cela en action. Disons que dans ce formulaire en particulier, je vais prendre le même exemple où un salaire permet de vérifier si l'utilisateur ou l'utilisateur s'appelle Edmin. Maintenant, pour utiliser l'option de validation ici, vous venez saisir, vous dites ici et vous pouvez dire valider, valider comme option ici. Vous pouvez avoir une paire clé-valeur, et vous pouvez mentionner le nom de la fonction ici. OK ? Quel est donc le nom de la fonction ? OK ? Nous pouvons donc créer une fonction ici. D'accord, je peux dire const validate name ici, et ce gain a une valeur comme paramètre Vous pouvez avoir quelque chose comme ça, puis vous pouvez dire si c'est une valeur. OK ? Vous pouvez donc dire si la valeur est égale à o admin. D'accord, ou si vous dites si la valeur n' est pas égale à Admin ici. OK. Oups, si la valeur n'est pas égale à Admin, alors ce que vous faites est de revenir Seul l'administrateur est autorisé. Seul l'administrateur est autorisé, quelque chose comme ça. OK. Selon vos besoins, vous pouvez envoyer le type de messages ou vous pouvez créer les messages en fonction de vos besoins, mais je vais l'enregistrer pour le créer maintenant. Maintenant, vous venez ici et vous dites nom valide, quelque chose comme ça. Sauvegardez ceci. Tu viens ici et laisse-nous te rafraîchir. Si vous venez ici et que vous tapez AD, je ne tape pas Admin. OK, et j'ai un e-mail G valide. OK. Email valide ici. Si je soumets, vous verrez que seul l' administrateur est autorisé. OK. Si je dis administrateur ici, administrateur. Oups, administrateur et si je dis « soumettre », vous verrez que l'erreur a disparu et vous pourrez soumettre le formulaire. D'accord ? Vous pouvez également avoir la logique de dire que l'administrateur n'est pas autorisé, d'accord ? Vous devez donc inverser la situation. L'administrateur n'est pas autorisé ici. OK ? Et vous pouvez inverser la situation, quelque chose comme ça. S'il est égal à Admin, n' autorisez pas Admin. OK ? Donc, si je dis Admin ici, OK. C'est bon. L'administrateur n'est pas autorisé. Tu peux voir. C'est bon. Donc c'est comme ça que ça marche, non ? Et j'espère que vous avez une idée de la façon dont cela fonctionne. Vous pouvez même le raccourcir comme si vous n'aviez pas besoin cette fonction distincte ici pour y être. OK. Donc, au lieu de cela, au lieu d'écrire une fonction séparée, je vais faire au lieu d'appeler cette fonction ici, d'accord, je peux dire ici, d'accord, je peux écrire une fonction ici elle-même de manière abrégée J'ai cette valeur, d'accord. Je vais utiliser Arrow. Je dirais que si la valeur n'est pas égale à celle d'Admin ici, d'accord ? Dans ce cas, vous écrivez « Admin is not allowed ». OK, quelque chose comme ça. Cela fonctionnera donc de la même manière. C'est bon. Vous pouvez voir que l'administrateur n'est pas autorisé, n'est-ce pas ? Cela deviendra donc vrai. Dans le cas contraire, il renvoie ce message. OK ? C'est ainsi que cela fonctionne ici et vous pouvez vous débarrasser de cette fonction si vous en avez besoin. OK ? Je vais juste le commenter. Si tu viens ici, d'accord ? Vous pouvez dire administrateur ici et essayer de soumettre. Vous pouvez voir que l'administrateur n' est pas autorisé. C'est bon. Et oui, cela fonctionne parfaitement. D'accord ? Donc ça marche, d'accord ? Et là, je vous avais donné un exemple. OK ? Donc voilà ce qui se passe, c'est là que nous transmettons le message, d'accord ? Maintenant, si le message d'erreur à points n'est pas trouvé, vous affichez ce message personnalisé. OK ? Ce que vous pouvez faire, c'est que vous pouvez avoir plusieurs règles de validation dans cette seule option. Par exemple, vous vérifiez ici si le nom d'utilisateur est valide ou s'il est admin ou non, ou si le nom est valide ou non. Désolé, le nom n' est pas valide ou non. Vous êtes en train de vérifier si le nom est admin ou non, non ? Si le nom n'est pas admin admin, sur cette base que vous affichez ce message, n'est-ce pas ? Donc ce que tu peux faire, c'est en avoir plus ici, d'accord, pas un seul. OK ? Donc, ce que je peux faire, c'est ajouter que cela peut être une sorte d'objet ici que vous pourriez ajouter, accord, et quelque chose comme ça. OK. Et tu es ici. Donc ça peut être nommé, d'accord ? Vous pouvez dire « pas administrateur » OK. Comme ça. Et c'est un contrôle. OK. Disons que je souhaite ajouter un autre chèque, non ? Je veux ajouter un autre chèque, n' est pas un numéro, d'accord ? Je ne veux donc pas que les utilisateurs entrent un numéro dans le champ. Donc, ce que je peux faire, c'est redire valeur. Qu'est-ce qu'un chèque ? Je vais faire comme ça. Je dirais que c'est N N, c'est N ici. OK ? Et je vais transmettre la valeur. OK. Et je vais avoir ce message ici. Le nom ne peut pas être un numéro. OK ? Et je terminerai par une virgule s'il le faut OK ? Vous pouvez donc le terminer par une virgule ou ce n'est pas nécessaire, en fait, c'est le dernier Maintenant, je tiens également à vous dire que j'espère que vous êtes au courant de cette façon abrégée de faire les choses Nous utilisons donc l' expression conditionnelle ici, le conditionnel ou, et vous pouvez voir ici si la valeur n'est pas égale à admin, d' accord, vérifie si la valeur n'est pas égale à admin. OK ? Et si la condition est vraie, l'expression renvoie true. Cette expression deviendrait donc vraie. Et si c'est faux, cela sera renvoyé. OK. Donc, de la même manière, cela vérifie si c'est vrai, alors cela serait vrai serait renvoyé, et si faux, alors cela serait renvoyé. Donc ici, vous pouvez tester cela ici en saisissant des chiffres ici. Vous pouvez voir que le nom est obligatoire et doit comporter au moins deux caractères, d'accord ? Attends une minute. Je peux réellement taper maintenant et je peux soumettre. OK. Cela me donne une erreur ici, d'accord ? Et laissez-moi vérifier quelle est l'erreur pour qu'elle soit simple. J'ai fait une faute de frappe ici. Le dernier N est en majuscule ici, quelque chose comme ça. Oups. Désolé. Donc le dernier N est en majuscules, quelque chose comme ça, d'accord ? Enregistrez ceci et vous viendrez ici pour vous rafraîchir. OK, et tapez trois, quatre, vous pouvez voir, le nom ne peut pas être un chiffre. OK ? Tu peux en ajouter une autre, d'accord ? Vous pouvez en ajouter une autre si vous le souhaitez. Vous pouvez en ajouter autant que vous le souhaitez. OK ? Ce sont toutes des règles de validation personnalisées. Si la règle est complexe et qu'elle ne convient pas ici, vous pouvez ajouter une fonction distincte qui vérifie cela, quelque chose comme ceci, et vous pouvez lier cette fonction ici. OK. Donc tout cela est possible ici, d'accord. Mais en gros, je tiens à souligner que c'est une façon d'ajouter une logique de validation personnalisée, d'accord ? Et l'option de validation vous permet d' effectuer des validations personnalisées détaillées au-delà de simples vérifications Et cette fonctionnalité est utile dans les scénarios où les entrées nécessitent des formats ou des conditions spécifiques qui ne sont pas couverts par des éléments génériques, comme longueur maximale requise qui existe par défaut dans les formulaires React Hook. OK ? Ainsi, en dehors de ceux par défaut, React Hook Forms vous offre une grande flexibilité pour créer également une grande flexibilité pour créer vos propres logiques personnalisées et cela de manière plus propre et soignée C'est bon. J'espère que cela utile et j'espère que vous serez en mesure de suivre. 10. Au-delà des bases : mettre en œuvre des validations personnalisées sophistiquées: Nous allons donc parler un peu plus l'option de validation et apprendre comment ajouter des validations personnalisées un peu plus complexes dans votre application, n'est-ce pas ? Jusqu'à présent, ce que nous avons vu, c'est qu'avec l'option de validation, vous pouvez réellement ajouter ce type de validations, d'accord ? Vous pouvez avoir des validations personnalisées adaptées à votre application ou à votre domaine, n'est-ce pas ? Nous vérifions donc ici si l'utilisateur est administrateur ou non, et ici nous vérifions si l'utilisateur saisit un numéro ou non dans le nom. Les deux ne devraient pas être autorisés et ils devraient être manipulés de manière appropriée en fonction condition que vous définissez, d'accord ? Nous avons donc ces deux vérifications d' état ici. Il y aura des scénarios dans lesquels vous souhaiterez peut-être en ajouter d'autres. Vous pouvez donc ajouter plus de choses ici en ajoutant une virgule à la fin et vous pouvez continuer à ajouter d'autres entrées ici dans l'option de validation Supposons maintenant que vous ayez un scénario dans lequel vous souhaitez effectuer une validation asynchrone. Maintenant, que signifie cette validation asynchrone ? La validation asynchrone signifie donc que vous voulez vérifier auprès du backend, n'est-ce pas ? Vous avez peut-être un serveur principal, vous souhaitez vérifier quelque chose dans le serveur principal, puis afficher le message d'erreur de validation à l'utilisateur. Comment ferais-tu ça ? Cela est donc possible à l' aide de l'option de validation elle-même, comme l'option de validation elle-même. OK ? Disons donc que dans le scénario, nous avons le nom et l'adresse e-mail. Disons que je veux vérifier nom, disons que ce n'est pas un nom, disons que c'est le nom d'utilisateur et que je veux vérifier et valider cela avec le backend, que le nom d'utilisateur existe ou non. OK. Alors, comment pourrais-je m'y prendre ? OK ? Donc, ce que vous pouvez faire, c'est avoir une fonction de vérification ou une fonction asynchrone ici. Je dirais qu'une vérification asynchrone est ce que je dirais, d'accord ? Et en utilisant cela, vous pouvez effectuer une validation asynchrone, Alors laisse-moi le faire. OK. Donc ce que je ferais, c'est ici, je viendrais ici. OK, je dirais une virgule, je dirais que valider, et valider est déjà ajouté, donc je dirais vérifier le nom d'utilisateur OK. Et ici, je dirais valeur ou valeur ici. OK. Et j'aurais une logique D. OK ? Maintenant, la logique va se présenter comme suit ici. OK. Mais cela fait maintenant une vérification avec le backend, non ? Nous devrons donc marquer cela comme étant depuis. OK. Maintenant, je vais vous montrer comment vous pouvez le faire. Disons que j'ai const, d' accord, j'ai cette valeur Pollan qui existe, que j'obtiens en vérifiant si nom d'utilisateur fonctionne ici . OK ? Vérifiez s'il s'agit d'un nom d'utilisateur, et il reçoit une valeur en entrée. Maintenant, qu'est-ce que le nom d'utilisateur check if ? OK ? Permettez-moi donc d'ajouter le nom d'utilisateur check iff ici. OK ? Maintenant, ici, je peux dire fonction. Vérifiez que j'utilise un nom. OK. Quel est le paramètre ? Il accepte ? Il accepte le paramètre , donc je ne veux pas transmettre de paramètres pour le moment. D'accord, je vais le définir à l'aide de la fonction flèche, donc je dirais que c'est égal à, d'accord. Et attendez une minute. J'ai truqué la syntaxe. Je vais donc dire une synchronisation. Vérifiez si vous êtes désolé, pas un lavabo. J'ai truqué la syntaxe. Permettez-moi de le supprimer. OK. Ce sera donc constant. Vérifiez si vous utilisez un nom. OK. Et je vais appeler cela exister parce que vérifier si le nom d'utilisateur existe sonne mieux. OK ? Je vais donc simplement le remplacer ici, vérifier si le nom d'utilisateur existe. OK. Et ici, je vais marquer cela comme une fonction asynchrone, d'accord ? Et je vais transmettre le nom d'utilisateur, comme ça. OK ? Comme la valeur est transmise ici, ce n'est rien d' autre que le nom d'utilisateur. Et j'ai défini le chèque ici, d'accord ? Maintenant, ce que je peux faire ici, c'est faire une simulation de vérification sur le back-end Je peux dire que les const existent. OK. Et ici, vous pourriez avoir un appel EPI que vous pourriez faire, d'accord ? Donc, ici, vous avez peut-être le code de l'appel EPI, et cela pourrait renvoyer un résultat booléen Ou vous pourriez le traiter et obtenir la valeur booléenne, n'est-ce pas ? Donc, c'est à vous de décider. Mais ce que je peux faire ici, c'est que vous le pouvez réellement , donc ce que je vais faire ici, c'est simuler une vérification du backend. Je peux dire « attendez ». OK, et je peux te faire une nouvelle promesse ici, d'accord ? Et je dirais « Résolvez ici ». OK. Je ne fais donc qu'une promesse. Je dirais définir le délai d'attente, et je dirais résoudre des milliers Je fais un délai de 1 000 millisecondes ici, pour simuler Et je vais dire « retour ». OK, je vais dire return, et vous pouvez renvoyer une valeur booléenne ici. OK ? Maintenant, quelle valeur booléenne pouvez-vous renvoyer ? Donc, ce que je peux faire, c'est que je peux avoir une liste statique ici. OK, je vais donc avoir une liste statique des noms d'utilisateur existants. OK ? C'est une liste statique, et c'est une RA, je dirais administrateur, je dirais utilisateur, un, deux, trois, et je peux dire que vous pouvez en ajouter une de plus. Je vais sucer, quelque chose comme ça. Maintenant, vous pouvez dire retour, et je peux vérifier s'il existe. OK ? Et désolé, je peux renvoyer ce que je vais retourner, je peux dire un nom d'utilisateur existant. OK, le point inclut, je vais dire le nom d'utilisateur ici. C'est donc un nom d'utilisateur que je transmets. OK ? Donc, ce que cela fait, c'est que j'ai une liste statique de noms d'utilisateur Bien sûr, ce ne sera pas le cas dans votre cas car vous pourriez effectuer un appel d'API principal ici , d'accord ? Donc, ce que je fais, c'est que j'ai une liste de départ de noms d'utilisateur, d'accord, et je vérifie le nom d'utilisateur, comme si le nom d' utilisateur saisi existait dans le nom d'utilisateur existant S'il existe, je renvoie cette valeur de chèque. C'est un résultat booléen que je renvoie, d'accord ? Et avant de faire cette vérification, je simule ici un délai de 1 000 millisecondes . C'est bon. C'est donc comme un appel d' API simulé ici, n'est-ce pas ? Et ici, comme c'est un lavabo, je conseille d'attendre parce que cela revient à une promesse ici. Et comme il s'agit d'une attente, cela devient un évier. Hein ? J'espère donc que cela a du sens maintenant par rapport à ce qui se passe ici, d'accord ? Et ici, je peux dire return not equal to exist ou vous pouvez dire nom d'utilisateur déjà utilisé. OK ? Donc le nom d'utilisateur est déjà pris, quelque chose comme ça. C'est bon. Vous avez donc ce genre de message qui est envoyé. Sauvegardez ceci. OK. Voyons comment cela fonctionne. OK ? Je vais donc faire une mise à jour. Donc, le nom d'utilisateur que nous avons est John, l'un des noms d'utilisateur, je peux le faire John. Je peux dire « Soumettre ». Vous pouvez voir au bout d'un moment que vous pourriez voir le nom d'utilisateur déjà utilisé. Je pourrais également augmenter le délai. OK ? C'est possible. Je peux dire John One et moi au rate gmail.com. Donc, comme ce nom d'utilisateur est unique, il fonctionnera. OK, vous pouvez voir qu'il a été soumis. OK. C'est ainsi que fonctionne la validation asynchrone. Et il ne s'agit pas simplement d'une validation statique, mais si vous souhaitez effectuer des vérifications ou des validations avec le backend, vous pouvez absolument le faire, n'est-ce Et maintenant, vous pouvez imaginer à quel point cela peut être puissant. OK ? Donc, si vous travaillez sur un vrai projet, si vous avez des EPI en cours d'exécution, vous devez valider quelque chose en appelant un EPI, vous pouvez absolument le faire, n' Vous pouvez même faire des validations dépendantes, d'accord ? Donc, les validations dépendantes, comme je vais vous le dire, supposons que vous ayez un champ de mot de passe et un champ de mot de passe confirmé, n'est-ce pas ? Maintenant, ce que vous devez faire, c'est que lorsqu'un utilisateur saisit le mot de passe, vous devez le vérifier dans le champ autre mot de passe, et s'il est incorrect, vous pouvez déclencher un message indiquant que le mot de passe ne correspond pas. Tu devrais peut-être le faire, non ? Cela pourrait donc être un autre cas d'utilisation ici. Donc, ce que je ferais, c'est ici, j'ai une étiquette. Il s'agit de la deuxième étiquette après cette étiquette et après ce message d'erreur ici. OK ? Ce que je peux faire, c'est ici, je peux ajouter une étiquette. OK, je peux dire étiquette, quelque chose comme ça. OK. Et je peux dire mot de passe, comme ça, et ici je peux dire saisir un mot de passe ici. OK. Et l'entrée peut être de type mot de passe. OK, tapez le mot de passe, et ici, je dirais, OK, ici. Je dirais : enregistrez-vous, enregistrez-le. OK ? Et comment l' enregistreriez-vous ? Vous devez donc l'enregistrer comme mot de passe. Je vais donc garder le petit mot de passe B ici. OK. Et je dirais que c'est nécessaire, cela doit être exigé. OK ? Je peux transmettre tout cela, le champ obligatoire et la validation requise, mais je ne le ferai pas. OK ? Je vais juste garder les choses simples. OK ? C'est donc chose faite. C'est bon. Ou si tu veux, je vais juste obtenir la validation d'ici. OK. Donc oui, c'est la validation que je vais ajouter ici. Donc oui. C'est ça. OK. Et cela ferme le formulaire requis ici, enregistré. Le registre est fermé. OK, c'est fermé, le registre est fermé, et puis vous avez des bretelles bouclées fermées D'accord ? Et ça y est. Nous constatons une erreur ici. Quel est le but de l'erreur ? Laisse-moi voir. Je n'ai donc pas besoin de cette option validée, je vais donc m'en débarrasser. OK, je vais garder les choses simples. OK. C'est tout ce dont j'ai besoin, non ? Donc, à peu près. OK. Et maintenant, ce que je peux faire, c'est dupliquer ce champ. OK. Donc, ce champ entier le duplique, et vous pouvez avoir un mot de passe de confirmation ici, non ? C'est confirmé. OK. Et au lieu de taper un mot de passe, c' est un mot de passe de type. Au lieu du mot de passe ici, je peux avoir une confirmation du mot de passe. OK, quelque chose comme ça. OK. Et vous avez une longueur minimale ici. OK, je vais me débarrasser de cette virgule. OK, longueur minimale. Maintenant, longueur minimale après longueur minimale, ce que vous pouvez faire est ici, vous pouvez ajouter une option validée, donc vous pouvez dire valider. Maintenant, ce champ de mot de passe doit correspondre au mot de passe de confirmation qui doit toujours correspondre au mot de passe. Vous pouvez donc dire valeur, d'accord, flèche. Et vous pouvez dire que la valeur est égale à watch et oups. La montre n'est pas importée, donc je dois importer, regarder, regarder, regarder, je dis, euh, cela ne m'autorise pas à regarder et je vais dire mot de passe. Donc ça regarde le mot de passe, et il renvoie sa valeur, d'accord ? Et si c'est vrai, c'est bon. Si ce n'est pas le cas, vous envoyez un message indiquant mots de passe ne correspondent pas, n'est-ce pas ? Les mots de passe ne correspondent pas, quelque chose comme ça, non ? C'est chose faite. Nous devons faire attention. OK, donc la montre n'est pas encore ajoutée. Sinon, nous aurons un message d'erreur. C'est ce que j'ai fait et tu peux venir ici. OK. La forme n'a pas l'air géniale. La forme n'est pas très belle. Mais permettez-moi d'ajouter quelques tags BR et les aligner en un seul pro. Donc, après chaque étiquette, j' ajouterai le tag BR. D'accord ? Ça devrait aller pour le moment, on est en train d'apprendre, non ? Donc oui, le formulaire est prêt. OK. Vous pouvez voir si je soumets, vous verrez toutes les validations se déclencher, n'est-ce pas ? OK. Et tu peux dire test. Vous pouvez dire A, au tarif gmail.com. Vous pouvez voir les mots de passe, un, deux, trois, quatre, OK, un, deux, trois, quatre, cinq, six. OK, j'en ai inscrit six. Et ici, je vais entrer une autre valeur. D'accord ? Et si je dis « Soumettre », d'accord ? Voyons ce qui va se passer. L'envoi n'a rien déclenché. OK ? C'est bizarre. C'est bon. Qu'est-ce qui ne va pas ? Laisse-moi voir. La validation ne se déclenche donc pas, peut-être parce que je n'ai pas ajouté les messages d'erreur de validation. OK, j'aurais dû l'ajouter. Donc, ce que je vais faire, c'est qu'après l'étiquette, vous affichez les messages d'erreur, c'est vrai. Donc, après l'étiquette, j'ajouterais les messages de validation. Donc erreurs, triez, confirmez le mot de passe. OK. Il s'agit d'un nom de champ. OK. Je vais dire confirmer le mot de passe, quelque chose comme ça. OK. Et ici aussi, juste après l'étiquette, j'ajouterai les messages d'erreur. Vous devriez donc voir le message d'erreur maintenant que les mots de passe ne correspondent pas. Vous pouvez voir comment cela fonctionne. Alors maintenant, si je change cela en un, deux, trois, quatre, cinq, d'accord. OK. Laisse-moi voir. Cinq. OK. Ai-je tapé un, deux, trois, quatre, cinq, un, deux, trois. OK. Alors laissez-moi réessayer, un, deux, trois, quatre, cinq. OK, ici, un, deux, trois, quatre, cinq. Je soumets. OK, vous pouvez voir le message d'erreur du mot de passe n' est pas déclenché. D'accord ? Donc ça marche bien, non ? C'est ainsi que vous pouvez comparer, regarder ou créer des validations qui dépendent d'un autre champ Donc, ici, la validation du champ de confirmation du mot passe dépend du champ du mot de passe, n'est-ce pas ? C'est ce que l'on appelle des validations dépendantes, n' est-ce pas C'est donc à peu près tout. Et maintenant, il y a encore une chose que je veux te montrer. Alors maintenant, ce qui se passe, c'est que si vous soumettez à ce moment-là, la validation est déclenchée, n'est-ce pas ? Il y aura des scénarios dans lesquels vous souhaiterez déclencher la validation lors d'une modification ou lorsque l'élément est saisi, n'est-ce pas ? Lorsque l'utilisateur remplit le formulaire. Cela devrait donc être en temps réel. Vous pouvez le faire en temps réel avec un petit changement. Donc ce que tu peux faire, c'est venir ici. Et lorsque vous créez une instance de formulaire d'utilisation ici, d' accord, ici dans le formulaire d'utilisation, vous pouvez ajouter un, vous pouvez ajouter un CO prese, ok et ici vous pouvez spécifier le mode et vous pouvez dire « changement en cours accord, ici dans le formulaire d'utilisation, vous pouvez ajouter un, vous pouvez ajouter un CO prese, ok et ici vous pouvez spécifier le mode et vous pouvez dire « changement en Vous pouvez voir sur bl qu'il y avait pas mal d'options, d'accord ? Quelques options sur le flou en cas de modification lors de la soumission, je dirais en cas de modification Je vais enregistrer ça et maintenant voir la magie, d'accord. J'ai donc ajouté ici. Vous pouvez voir que le nom est obligatoire et doit comporter au moins deux caractères. Tu peux voir. OK. Entrez le nom, OK, la validation est terminée R, au tarif gmail.com. OK. Mot de passe. OK, un, deux, trois, quatre, cinq. OK, un, deux, trois, quatre, cinq. OK. Tu peux voir. Six. OK. Vous pouvez donc voir comment le formulaire fonctionne en temps réel maintenant, et tout cela grâce à une seule modification. J'ai ajouté cette paire clé-valeur ici en tant qu' objet lors de la création du formulaire, n'est-ce pas ? J'espère donc qu'il y a eu de bons enseignements ici sur la gestion des formulaires avec React Hook Form, n'est-ce pas ? J'espère que cela vous a été utile et que cela vous donne la possibilité de créer vos propres formulaires manière très robuste avec des performances efficaces et de nombreuses fonctionnalités en réduisant beaucoup de code standard , n'est-ce pas ? Voici donc les formulaires React Hook pour vous, et les validations personnalisées pour vous J'espère que cela vous a été très utile. 11. Conclusion du cours: Et cela nous amène à la fin de ce voyage transformateur dans le monde des formes React Hook Nous avons étudié en profondeur comment React Hook Form peut changer la donne pour gestion des formulaires dans les applications React Nous avons exploré de nombreuses choses en matière de gestion des formulaires dans React. Nous avons appris comment résoudre les problèmes courants et nous avons découvert la puissance des formulaires React Hook. Donc, juste pour vous donner un résumé de ce que nous avons appris, nous avons appris comment vous pouvez observer les valeurs changer de manière dynamique, implémenter des validations, améliorer les performances de vos applications React Qui ont des formulaires, bien sûr. Et nous avons également comparé formulaires de base avec React Hook Form afin que vous compreniez de base en quoi React Hook Form peut changer la donne. J'espère donc que ce cours vous a donné une perspective différente de la gestion des formulaires dans le monde de React. Mais n'oubliez pas que notre exploration ne s'arrête pas là. La puissance de React Hook Forms réside dans sa flexibilité et capacité à s'adapter à un large éventail de tâches de gestion de formulaires. Et je vous encourage à continuer d'expérimenter, explorer et de repousser les limites du possible avec cet outil dans le cadre de vos projets Je suis impatient de voir comment vous allez utiliser les formulaires React Hook dans votre projet, car cela va dynamiser votre processus de gestion des formulaires Et n'oubliez pas que l'innovation et l'efficacité reposent sur l'adoption de nouveaux outils et techniques, et React Hook Form est désormais un élément essentiel de votre kit d'outils React Merci d'avoir participé à ce cours et merci d'être un groupe d'apprenants si engagés J'espère que ce cours vous a non seulement permis d'acquérir de nouvelles compétences, mais qu'il vous a également incité à envisager la gestion des formulaires sous un angle complètement différent. Avec ce cours, vous trouverez un projet de classe que vous pouvez compléter et soumettre dans la section projet. Bon apprentissage, je vous souhaite tout le meilleur.