1 00:00:02,390 --> 00:00:07,550 Maintenant que cette action est envoyée, nous pouvons aller dans le réducteur et écrire du code ici dans le changement d'entrée et 2 00:00:08,170 --> 00:00:09,440 c'est du code très simple. 3 00:00:09,440 --> 00:00:18,650 Nous retournons un nouvel état où je copie mon ancien état et je veux mettre à jour la valeur avec action. valeur parce que la valeur est une propriété que j'ai sur 4 00:00:19,400 --> 00:00:25,650 cette action, l'autre est isValid et c'est l'autre chose que je veux également mettre à 5 00:00:25,650 --> 00:00:30,710 jour à chaque frappe, isValid pour cette entrée, pas pour le formulaire 6 00:00:30,710 --> 00:00:38,420 entier mais pour cette entrée gérée en interne. Je ne mettrai pas à jour le toucher ici, mais le toucher devrait être 7 00:00:38,930 --> 00:00:43,490 mis à jour lorsque nous perdons le focus, car cela signifie que l'utilisateur a fini d'entrer du contenu 8 00:00:43,490 --> 00:00:52,550 pour le moment, alors maintenant je veux marquer cela comme touché et éventuellement afficher des erreurs de validation. Donc ici, le gestionnaire de focus perdu est une 9 00:00:52,580 --> 00:00:56,690 fonction que j'ajoute et là, je vais envoyer une 10 00:00:59,970 --> 00:01:01,890 action. Maintenant, pour 11 00:01:01,890 --> 00:01:04,470 cela, je vais créer un identifiant d'action 12 00:01:04,710 --> 00:01:16,170 ici, flou d'entrée, comme ça, flou d'entrée comme ça et maintenant nous pouvons répartir le flou d'entrée ici, pas besoin d'attacher de données et maintenant dans notre réducteur, nous pouvons utiliser qu'avec 13 00:01:16,170 --> 00:01:24,060 un autre cas, flou de saisie et si tel est le cas, je retourne un nouvel état où je copie l'ancien état 14 00:01:24,060 --> 00:01:29,280 parce que je veux garder la valeur et est valide et ne pas changer 15 00:01:29,280 --> 00:01:36,620 cela mais je veux mettre touched à true, donc dès que lorsque nous floutons une entrée, elle est traitée comme touchée. 16 00:01:36,750 --> 00:01:44,110 Maintenant, nous avons juste besoin de brancher cette fonction, je vais donc définir l'écouteur onBlur ici et pointer sur le gestionnaire de focus perdu afin 17 00:01:44,110 --> 00:01:46,870 que cela se déclenche lorsque cette entrée est floue. 18 00:01:49,850 --> 00:01:57,100 Maintenant, c'est très bien et cela va gérer l'état à l'intérieur de cette entrée, bien sûr, 19 00:01:57,190 --> 00:02:03,370 j'ai encore besoin de transmettre la valeur et les informations, que cette entrée soit 20 00:02:03,370 --> 00:02:14,700 valide ou non, à mes parents, donc à l'écran d'édition du produit. Par conséquent, ce que nous pouvons faire, c'est que nous pouvons ajouter un effet d'utilisation 21 00:02:14,700 --> 00:02:15,310 ici 22 00:02:18,430 --> 00:02:28,070 en tant qu'importation dans le composant d'entrée et peut-être l'ajouter ici et dans la fonction d'effet d'utilisation, je veux appeler une fonction que je m'attends à 23 00:02:28,130 --> 00:02:40,980 obtenir via des accessoires, peut-être lors d'un changement d'entrée, le nom dépend de vous et je vais simplement l'exécuter et transmettre ma valeur d'état d'entrée et mon état d'entrée est une information valide, de sorte 24 00:02:40,980 --> 00:02:48,540 que dans le composant parent, nous pouvons ajouter ici une fonction qui écoute cela à la fin, qui est déclenchée, 25 00:02:48,540 --> 00:02:53,790 qui reçoit ces deux arguments, puis dans le parent, donc dans le composant écran, 26 00:02:53,790 --> 00:03:00,310 nous pouvons mettre à jour notre état là-bas. Maintenant, l'important est de savoir quand cet effet d'utilisation 27 00:03:00,310 --> 00:03:07,420 doit s'exécuter et il ne doit pas s'exécuter après chaque frappe. Au lieu de cela, cela devrait s'exécuter chaque 28 00:03:07,420 --> 00:03:17,780 fois que notre valeur d'état d'entrée ou est valide change bien sûr, car c'est de cela que nous dépendons ou pour être précis, nous pourrions 29 00:03:17,780 --> 00:03:25,910 même envoyer ces informations uniquement si l'état d'entrée touché est vrai, sinon le composant parent pourrait ne pas s'en soucier. 30 00:03:26,100 --> 00:03:31,680 Alors maintenant, notre dépendance ici est l'état d'entrée entier parce que nous utilisons toutes les valeurs mais nous ne déclencherons 31 00:03:31,680 --> 00:03:36,600 toujours cette fonction sur le composant parent que si la touche est vraie, donc cet effet s'exécutera 32 00:03:36,600 --> 00:03:42,240 plus souvent mais la plupart du temps il ne fera rien tant que toucher n'est pas vrai et les accessoires sont 33 00:03:42,480 --> 00:03:49,170 bien sûr aussi notre dépendance, maintenant pour éviter une boucle de rendu infinie ici, nous pouvons utiliser la syntaxe de déstructuration d'objet et retirer le 34 00:03:49,650 --> 00:03:56,640 changement d'entrée, de sorte que si d'autres accessoires changent, nous ne le faisons pas refire cet effet parce que le changement d'entrée est ce dont nous 35 00:03:56,640 --> 00:04:01,890 avons besoin là-bas et maintenant nous pouvons ajouter que c'est une dépendance et les autres choses, d'autres changements dans 36 00:04:01,890 --> 00:04:03,820 les accessoires ne déclencheront pas cela. 37 00:04:04,260 --> 00:04:10,620 Alors maintenant, nous appelons cela sur le composant parent chaque fois que cela est touché, puis nous transmettons la valeur et 38 00:04:10,650 --> 00:04:13,470 la validité de cette entrée au composant parent. 39 00:04:16,680 --> 00:04:23,400 Alors maintenant, utilisons-le dans l'écran d'édition du produit, là sur nos entrées comme sur l'entrée de titre, nous pouvons ajouter l'accessoire de 40 00:04:23,400 --> 00:04:29,670 changement d'entrée et c'est l'accessoire que je cible ici à droite, donc vous devez obtenir ce bon nom et cela s'attend 41 00:04:29,670 --> 00:04:34,230 à obtenir une fonction en tant que valeur qui, à son tour, recevra deux arguments 42 00:04:34,230 --> 00:04:38,140 lorsqu'elle sera appelée - la valeur et la validité de cette entrée. 43 00:04:38,220 --> 00:04:44,490 Donc, ici, je veux pointer sur une fonction et cela peut être notre disons gestionnaire de changement d'entrée, nous pouvons recycler cela, 44 00:04:44,490 --> 00:04:46,910 je le renomme simplement pour être plus approprié. 45 00:04:47,130 --> 00:04:55,070 Donc, le gestionnaire de changement d'entrée peut être déclenché ici, comme ceci, là, je veux toujours passer mon identifiant parce que je 46 00:04:55,100 --> 00:04:59,930 veux réutiliser cela pour toutes mes entrées et maintenant depuis que je suis dans 47 00:04:59,930 --> 00:05:07,940 le composant écran, nous aurons plusieurs entrées et là , nous obtenons donc notre identifiant, puis nous obtenons la valeur et les informations 48 00:05:07,940 --> 00:05:09,410 sont valides, non? 49 00:05:09,410 --> 00:05:15,740 Donc, la valeur d'entrée et la validité d'entrée, c'est ce que nous obtenons, n'est-ce pas, parce 50 00:05:15,740 --> 00:05:19,940 que c'est ce que nous transmettons de l'intérieur du composant d'entrée 51 00:05:19,940 --> 00:05:22,510 ici, c'est ce que nous 52 00:05:22,580 --> 00:05:31,110 transmettons à la fonction de changement d'entrée. Donc, ici, nous n'avons pas besoin de faire de validation, nous avons juste besoin de transmettre ces informations. Nous transmettons la valeur d'entrée, nous transmettons la validité 53 00:05:31,110 --> 00:05:38,310 d'entrée et cela ne se produira que lorsque l'entrée est touchée par le chemin, donc quand elle perd le focus et bien sûr, ce 54 00:05:38,310 --> 00:05:38,760 n'est 55 00:05:38,790 --> 00:05:40,320 qu'une restriction que j'ai ajoutée 56 00:05:43,310 --> 00:05:48,010 ici, que vous devez avoir perdu le focus, vous pourrait bien sûr aussi aller au 57 00:05:48,020 --> 00:05:53,060 composant d'entrée et le supprimer si cochez pour mettre à jour la validité et la valeur 58 00:05:53,060 --> 00:05:59,260 dans le composant parent pour chaque entrée, pour chaque frappe. Maintenant, une chose supplémentaire que je veux faire, je veux 59 00:05:59,260 --> 00:06:07,390 envelopper cela dans un appel de rappel ici, afin que cette fonction ne soit pas reconstruite inutilement car gardez à l'esprit que nous avons transmis 60 00:06:07,510 --> 00:06:13,050 cette fonction à lors du changement d'entrée dans le composant d'entrée et là d'autre part, c'est une 61 00:06:13,060 --> 00:06:13,630 dépendance 62 00:06:13,630 --> 00:06:15,400 de cet effet, donc cet 63 00:06:15,430 --> 00:06:18,190 effet se réexécutera chaque fois que cela changera. 64 00:06:18,190 --> 00:06:22,780 Donc, cela ne devrait pas changer trop souvent pour éviter les exécutions d'effets inutiles et 65 00:06:22,810 --> 00:06:28,900 ici nous devons donc indiquer nos dépendances et la seule dépendance que nous avons est l'état du formulaire de répartition 66 00:06:29,080 --> 00:06:31,690 qui ne changera jamais, donc nous sommes bons, 67 00:06:31,690 --> 00:06:32,430 cela ne 68 00:06:32,430 --> 00:06:35,620 devrait jamais être reconstruit parce que le la logique là-dedans ne 69 00:06:35,680 --> 00:06:43,690 change pas, nous obtenons toutes les valeurs dont nous avons besoin comme arguments. Avec cela dans mon écran d'édition de produit, j'ai toujours mes formulaires qui bien sûr avec toutes les valeurs du formulaire et les validités du formulaire mais je gère seulement ceci 70 00:06:50,310 --> 00:06:55,600 ici parce que je dois le soumettre plus tard et parce que je dois dériver la validité globale du formulaire. Je ne le fais pas parce 71 00:06:55,600 --> 00:06:58,280 que je dois gérer chaque entrée ici, nous 72 00:06:58,390 --> 00:07:05,100 le faisons à l'intérieur du composant d'entrée à la place. Pour la soumission et ainsi de 73 00:07:05,100 --> 00:07:06,460 suite, nous 74 00:07:06,500 --> 00:07:18,810 avons toujours besoin des informations sur chaque magasin, la valeur cependant. Maintenant, si je reviens à l'entrée, n'oubliez pas que vous devez également définir la valeur initiale 75 00:07:19,320 --> 00:07:22,600 prop et si cela doit être initialement 76 00:07:22,680 --> 00:07:31,290 valide, donc si je reviens à l'écran de modification du produit, nous devons maintenant définir la valeur initiale ici sur quelle? 77 00:07:31,320 --> 00:07:35,640 Eh bien, nous pouvons vérifier si nous avons un produit édité et si nous le faisons, alors la valeur initiale ici 78 00:07:35,640 --> 00:07:37,150 devrait être éditéeProduct. title, 79 00:07:37,170 --> 00:07:44,760 sinon c'est une chaîne vide et cela devrait être initialement valide, alors utilisez cet accessoire ici si 80 00:07:45,480 --> 00:07:47,480 nous avons un produit 81 00:07:49,830 --> 00:07:51,860 édité, donc si c'est 82 00:07:51,870 --> 00:08:00,780 le cas, avec le double coup ici, si c'est vrai. Si nous n'avons pas de produit édité, cela ne peut pas être 83 00:08:00,780 --> 00:08:01,530 initialement 84 00:08:01,530 --> 00:08:03,390 valide, alors je passe false, 85 00:08:03,390 --> 00:08:07,210 ce qui est bien, ce qui devrait être le cas. 86 00:08:07,280 --> 00:08:13,040 Maintenant, nous pouvons copier ces deux lignes, également sur l'imageUrl, là, bien sûr, nous transmettons la valeur de l'URL de l'image 87 00:08:13,040 --> 00:08:20,400 comme valeur par défaut, à part cela, elle peut rester comme ça. Pour le prix, nous n'aurons jamais de valeur initiale et 88 00:08:20,400 --> 00:08:25,650 elle ne sera jamais initialement valable. Pour la description d'autre part, nous pouvons 89 00:08:25,660 --> 00:08:28,950 à nouveau ajouter ceci et pointer ici la description. 90 00:08:32,270 --> 00:08:39,050 Maintenant, avec cela, il y a une chose que je dois corriger dans le composant d'entrée auquel je viens également de 91 00:08:39,050 --> 00:08:43,450 penser, bien sûr ici, l'état de forme n'est plus disponible, à la place, nous 92 00:08:43,450 --> 00:08:47,950 avons notre état interne ici et j'ai nommé cet état d'entrée, c'est ce que 93 00:08:47,960 --> 00:08:49,870 mon réducteur retourne, nous devons donc 94 00:08:50,120 --> 00:08:51,700 l'utiliser ici bien sûr. 95 00:08:51,700 --> 00:08:57,830 Nous avons donc ici inputState. valeur comme valeur, c'est aussi simple que 96 00:08:57,920 --> 00:09:03,590 cela et nous avons ici inputState. isValid comme chèque et cela devrait être tout. 97 00:09:03,590 --> 00:09:10,060 Maintenant, si nous enregistrons ceci et examinons cela, voyons si cela fonctionne. Si nous allons ici, nous avons tous les messages d'erreur 98 00:09:10,060 --> 00:09:13,360 initialement, ce qui est logique car ils sont tous invalides au 99 00:09:13,790 --> 00:09:20,500 départ, si je commence à taper ici, j'obtiens une erreur, je ne trouve pas la variable isValid dans mon composant d'entrée, 100 00:09:20,500 --> 00:09:26,910 qui doit être dans ce gestionnaire qui se déclenche pour chaque frappe, probablement ici, oui dans le réducteur bien sûr, 101 00:09:26,920 --> 00:09:30,000 je devrais vérifier l'action. 102 00:09:30,000 --> 00:09:32,490 isValid, pas seulement isValid, je dois 103 00:09:32,730 --> 00:09:37,470 obtenir cela de l'action. Donc, avec ce correctif 104 00:09:37,480 --> 00:09:42,240 ici, revenons en arrière et réessayons. Si je commence à taper, cela est 105 00:09:42,270 --> 00:09:46,530 effacé, si je reviens à cela, mon erreur ne revient pas, donc c'est une 106 00:09:46,530 --> 00:09:50,800 petite erreur que nous devrons corriger. Pour le prix, 0 n'est 107 00:09:50,800 --> 00:09:55,330 alors pas considéré comme valide, on ne l'est pas non plus, donc la 108 00:09:55,350 --> 00:09:58,590 validation a quelques problèmes mais la saisie et ainsi 109 00:09:58,590 --> 00:10:03,490 de suite fonctionne mais voyons ce qui ne va pas avec la validation maintenant. 110 00:10:03,500 --> 00:10:07,090 Bien sûr, la façon dont la validation fonctionne ici, nous ne l'utilisons pas. 111 00:10:07,100 --> 00:10:12,290 Veuillez garder à l'esprit que je vérifie toujours si ce type de validation est activé pour cette entrée ou ce type ou ce type et nous le 112 00:10:12,290 --> 00:10:17,000 faisons à l'aide de ces accessoires spéciaux que nous devons définir. À l'heure actuelle, aucune validation 113 00:10:17,030 --> 00:10:22,980 n'est activée, donc seules les valeurs non valides par défaut sont prises en compte. 114 00:10:23,060 --> 00:10:28,610 Donc, si je vais à l'écran d'édition du produit, nous activons maintenant cette validation spéciale en définissant les 115 00:10:28,610 --> 00:10:39,170 bons accessoires, par exemple ici sur la saisie du titre, requis. Sur l'imageUrl, également requis. Sur le prix ici, requis et peut-être aussi 116 00:10:39,470 --> 00:10:47,540 min égal à zéro, de sorte que zéro est le nombre minimum que nous devons entrer ou un 117 00:10:47,540 --> 00:10:48,350 nombre 118 00:10:48,380 --> 00:10:58,480 supérieur à celui en fait, donc peut-être 0. 1 est notre nombre minimum. Pour la description, devrait également être requis et peut-être aussi une longueur 119 00:10:58,540 --> 00:11:05,100 minimale égale à 5, pour avoir au moins 5 caractères. Il y a aussi une chose supplémentaire que nous devons faire 120 00:11:05,100 --> 00:11:11,070 ici dans l'écran d'édition du produit, ce gestionnaire de changement d'entrée ici doit également être ajouté à chaque entrée 121 00:11:11,130 --> 00:11:16,870 bien sûr, pas seulement à l'entrée du titre. Nous devons donc ajouter ceci pour 122 00:11:16,870 --> 00:11:26,760 l'imageUrl, sinon nous aurons une erreur plus tard, nous devrons l'ajouter ici à l'entrée de prix, nous devrons également l'ajouter ici évidemment à l'entrée 123 00:11:26,760 --> 00:11:30,580 de description et remplacer l'identifiant dans le bon sens. 124 00:11:32,810 --> 00:11:36,010 Alors testons cela et vous remarquerez quelque chose d'étrange, si vous 125 00:11:36,040 --> 00:11:39,000 tapez ici, cela fonctionne, si vous tapez dans l'imageUrl, ne 126 00:11:39,000 --> 00:11:41,210 fonctionne pas correctement, la validation ne 127 00:11:41,220 --> 00:11:47,300 se met pas à jour et vous ne pouvez pas non plus revenir en arrière, au moins cela pourrait être bloqué. 128 00:11:47,310 --> 00:11:54,990 Donc, si nous rechargeons cela avec une erreur de commande ou en appuyant deux fois sur R sur Android et que nous 129 00:11:55,010 --> 00:12:00,950 essayons à nouveau ici, disons sur le prix que vous remarquerez que cela fonctionne, mais pourquoi cela 130 00:12:00,950 --> 00:12:05,630 ne fonctionne pas et que ce serait le cas d'ailleurs si vous l'avez 131 00:12:05,670 --> 00:12:10,200 essayé sur l'imageUrl, ici cela fonctionne. Pourquoi ça marche si j'ai déjà édité une autre entrée 132 00:12:10,200 --> 00:12:15,100 parce que maintenant par exemple, ça ne marche plus sur un titre? Et le problème est lié au fait que cela soit coincé ici. 133 00:12:15,390 --> 00:12:22,500 Nous rendons ce composant trop souvent et la raison en est très difficile à trouver. 134 00:12:23,010 --> 00:12:24,980 En fin de compte, nous avons une sorte de 135 00:12:24,990 --> 00:12:27,290 boucle infinie ici et le problème est notre gestionnaire de changement d'entrée. 136 00:12:27,420 --> 00:12:34,290 Nous utilisons le rappel ici pour éviter les recréations inutiles, mais en le liant comme ceci, nous rendons ce 137 00:12:34,290 --> 00:12:40,710 type obsolète, cela ne fait aucune différence maintenant car cela créera une nouvelle liaison de fonction pour chaque 138 00:12:40,800 --> 00:12:42,230 cycle de rendu. 139 00:12:42,750 --> 00:12:49,590 Donc, à la fin, ce que nous devons faire, c'est que nous devons supprimer le lien ici, le supprimer ici 140 00:12:49,590 --> 00:12:51,550 à tous ces endroits, car 141 00:12:51,780 --> 00:12:56,980 cela cassera notre application, cela provoquera trop de cycles de rendu en raison de l'utilisation du 142 00:12:57,210 --> 00:13:01,200 rappel n'ayant pas d'effet et à la place, nous pourrions voulez 143 00:13:01,200 --> 00:13:05,850 transmettre un accessoire ID de titre et ainsi de suite à notre composant d'entrée. 144 00:13:06,050 --> 00:13:14,200 Alors ajoutons ceci sur toutes ces entrées, cet accessoire d'ID est essentiellement ce que j'ai ajouté dans l'appel de liaison avant, donc nous 145 00:13:14,260 --> 00:13:18,860 le transmettons simplement au composant d'entrée afin que nous puissions l'utiliser là-dedans, faisons 146 00:13:18,880 --> 00:13:23,430 cela pour toutes ces entrées ici et maintenant, comment pouvons-nous utiliser cela? 147 00:13:23,470 --> 00:13:27,910 Bien à l'intérieur de l'entrée, nous avons maintenant cet accessoire d'identification disponible à 148 00:13:27,910 --> 00:13:30,820 droite, nous pouvons donc simplement le joindre. 149 00:13:30,880 --> 00:13:38,280 Donc, ici, nous pouvons transmettre des accessoires. id ou simplement ID afin que nous n'ayons pas à ajouter d'accessoires ici 150 00:13:38,280 --> 00:13:44,370 et à la place retirer ID des accessoires ici comme nous l'avons fait avec lors du changement d'entrée et ajouter 151 00:13:44,470 --> 00:13:50,470 ID comme dépendance de cet effet par la suite. Et maintenant, avec cela, nous transmettons toujours l'identifiant 152 00:13:50,830 --> 00:13:55,630 de cette entrée mais d'une manière plus élégante qui évite d'utiliser bind qui recrée finalement 153 00:13:55,630 --> 00:13:59,000 cette fonction pour chaque cycle de rendu et conduit donc 154 00:13:59,140 --> 00:14:03,430 à une boucle infinie et donc maintenant si nous rechargeons ceci et nous 155 00:14:06,890 --> 00:14:15,490 allez dans la section admin ici, maintenant je peux entrer quelque chose ici et aussi ici et maintenant cela fonctionne parce que maintenant nous évitons ce 156 00:14:15,490 --> 00:14:19,660 cycle de rendu infini et nous obtenons la validation comme nous le voulions. 157 00:14:19,690 --> 00:14:26,170 Alors maintenant, c'est mon approche ou c'est l'approche que je voulais vous montrer ici, que vous pouvez utiliser pour avoir 158 00:14:26,170 --> 00:14:31,630 un composant d'entrée réutilisable qui fait sa propre validation, que vous pouvez configurer de l'extérieur et où 159 00:14:31,630 --> 00:14:33,960 vous pouvez toujours gérer le formulaire global. 160 00:14:34,060 --> 00:14:36,120 Avec cela, plongeons dans quelques ajustements, comme 161 00:14:36,220 --> 00:14:42,070 par exemple le style de ce message d'erreur que nous affichons, ce message d'erreur de validation et également le contrôle lorsque 162 00:14:42,070 --> 00:14:45,310 nous l'afficherons parce que je ne veux pas l'afficher tout le temps.