1 00:00:02,530 --> 00:00:05,110 Alors, comment pouvons-nous optimiser cela? 2 00:00:05,110 --> 00:00:11,350 Eh bien, vous remarquerez peut-être que ce code jsx peut à la fin être répété encore et encore, chaque entrée 3 00:00:11,360 --> 00:00:12,590 ressemble à ceci. 4 00:00:12,640 --> 00:00:18,130 Nous avons une vue, nous avons une étiquette avec le texte lui-même et nous pourrions aussi vouloir du texte d'erreur que 5 00:00:18,130 --> 00:00:19,140 nous pouvons afficher. 6 00:00:19,270 --> 00:00:22,900 Il serait donc logique d'externaliser cela dans un composant distinct et 7 00:00:22,990 --> 00:00:25,370 c'est exactement ce que je veux faire. 8 00:00:25,480 --> 00:00:32,230 J'irai dans mon dossier de composants et là dans le dossier UI, j'ajouterai une entrée. fichier js qui contiendra un composant React, donc j'importe 9 00:00:32,230 --> 00:00:38,410 réagir de réagir bien sûr, puis importer quelques éléments de React Native et ces choses à la 10 00:00:38,410 --> 00:00:45,460 fin sont ma vue, le composant texte, le composant de saisie de texte et la feuille de style parce que 11 00:00:45,460 --> 00:00:54,210 je '' Nous en aurons également besoin de React Native et avec cela ici, nous pouvons créer ici le composant d'entrée qui obtient des 12 00:00:54,210 --> 00:01:01,410 accessoires et doit retourner du jsx. Nous aurons un objet styles avec Feuille de style. créer et bien sûr 13 00:01:02,780 --> 00:01:08,230 à la fin, nous l'exportons par défaut ici, ce composant. 14 00:01:08,340 --> 00:01:18,420 Maintenant, si nous revenons à l'écran d'édition du produit, nous pouvons couper ce code jsx de titre, de sorte que la vue environnante, le texte, la 15 00:01:18,440 --> 00:01:23,890 saisie de texte et cette partie du message d'erreur, coupez-le d'ici, hors de 16 00:01:24,250 --> 00:01:32,700 l'écran d'édition du produit et déplacez que dans l'écran d'entrée et là, utilisez-le comme valeur de retour dans le composant d'entrée ici. 17 00:01:32,740 --> 00:01:37,210 Maintenant, bien sûr, nous devons ajuster cela un peu, mais c'est notre squelette général que je veux utiliser 18 00:01:37,210 --> 00:01:37,720 ici. 19 00:01:37,960 --> 00:01:42,720 Maintenant, également à partir de l'écran de modification du produit, je 20 00:01:42,770 --> 00:01:49,270 prendrai le style, cette étiquette de contrôle de formulaire et le style d'entrée peuvent tous être supprimés 21 00:01:49,270 --> 00:01:55,440 et doivent être déplacés dans le composant d'entrée et là dans la feuille de style. 22 00:01:55,460 --> 00:02:00,740 Alors maintenant avec ça bien sûr, cela ne peut être utilisé que pour un titre et je veux 23 00:02:00,740 --> 00:02:07,580 créer un composant d'entrée qui peut être utilisé pour n'importe quelle entrée, cela signifie par exemple que l'étiquette ici doit être dynamique, donc je 24 00:02:07,710 --> 00:02:10,830 m'attends à obtenir cela sur une étiquette nommée accessoire peut-être. 25 00:02:13,740 --> 00:02:18,420 En général, je veux également m'assurer que la saisie de texte peut être configurée de l'extérieur, je 26 00:02:18,420 --> 00:02:25,800 vais donc transmettre tous les accessoires que je reçois sur mon composant d'entrée ici à la saisie de texte, de sorte que sur ce composant d'entrée, nous 27 00:02:25,800 --> 00:02:31,060 serons en mesure de définir des choses comme le type de clavier parce que je ne veux pas coder en 28 00:02:31,070 --> 00:02:31,570 dur 29 00:02:31,570 --> 00:02:36,720 ici, à la place, cela devrait être un wrapper réutilisable autour du composant d'entrée de texte qui peut être 30 00:02:36,720 --> 00:02:37,570 configuré de l'extérieur. 31 00:02:37,800 --> 00:02:43,990 Donc ces paramètres ici par exemple, je vais les couper d'ici pour que nous puissions les régler de l'extérieur, je vais aussi me débarrasser de 32 00:02:44,010 --> 00:02:46,530 ces écouteurs car on n'en a pas vraiment besoin. 33 00:02:52,130 --> 00:02:57,230 Le texte d'erreur ici devrait également être réglable de l'extérieur, donc je vais vérifier le texte d'erreur des accessoires 34 00:02:57,230 --> 00:02:58,640 ici et bien sûr, vous 35 00:02:58,640 --> 00:03:02,720 pouvez comme toujours donner à ces accessoires tous les noms que vous voulez, bien 36 00:03:02,720 --> 00:03:07,570 sûr, nous devrons également changer ce que nous attribuons ici en tant que valeur et ainsi de suite, 37 00:03:07,570 --> 00:03:08,800 cela va également changer. 38 00:03:09,350 --> 00:03:11,720 Mais maintenant, nous pouvons déjà commencer 39 00:03:11,720 --> 00:03:23,200 à utiliser cette entrée ici, allons à l'écran d'édition du produit et là, je vais juste aller en haut et importer l'entrée du dossier des composants bien sûr et là du 40 00:03:23,200 --> 00:03:27,210 dossier UI et là de l'entrée et ensuite nous peut commencer 41 00:03:27,550 --> 00:03:32,770 à utiliser le composant d'entrée à l'endroit où j'avais précédemment mon composant d'entrée de 42 00:03:32,770 --> 00:03:33,910 texte ici. 43 00:03:34,000 --> 00:03:40,510 Alors là, je vais juste ajouter une entrée et maintenant sur l'entrée, nous pouvons ajouter le paramètre que je coupe, comme le type de 44 00:03:40,510 --> 00:03:43,000 clavier et ainsi de suite car cela sera transmis. 45 00:03:43,180 --> 00:03:50,950 Nous pouvons définir notre étiquette de titre, comme le titre et également notre texte d'erreur possible comme s'il vous plaît entrer un titre valide, bien que ce ne soit pas 46 00:03:51,550 --> 00:03:55,470 tout ce que nous ferons en ce qui concerne la validation, mais c'est un début. 47 00:03:55,510 --> 00:03:57,250 C'est ainsi que nous pouvons ensuite utiliser 48 00:03:59,130 --> 00:04:02,970 cette entrée et bien sûr, c'est aussi ainsi que nous pouvons maintenant l'utiliser pour remplacer les autres entrées. 49 00:04:02,970 --> 00:04:11,400 Ainsi, par exemple ici, l'imageUrl, ici je le configure sur imageUrl, veuillez entrer une imageUrl valide peut-être, le type de clavier par défaut est correct, la 50 00:04:11,400 --> 00:04:17,910 correction automatique de la capitalisation automatique n'est pas requise, retournez le type de clé ensuite, nous pouvons laisser cela, 51 00:04:17,910 --> 00:04:18,480 nous 52 00:04:18,480 --> 00:04:23,070 ne le faisons pas quoi que ce soit avec cela, nous pourrions ajouter un 53 00:04:23,070 --> 00:04:29,990 peu de logique, mais je ne le fais pas ici. Pour le prix, je vais laisser le rendu conditionnel, mais là-dedans, je 54 00:04:33,510 --> 00:04:42,300 peux ajouter mon entrée ici, définir cela au prix s'il vous plaît entrer un prix valide, le type de clavier ici ne doit bien sûr pas être par défaut mais pavé décimal, 55 00:04:42,330 --> 00:04:49,380 pas besoin de majuscule automatique ou la correction automatique alors débarrassons-nous de cela. Et pour la description ici, je vais également 56 00:04:49,380 --> 00:04:58,740 ajouter mon entrée ici, description, veuillez entrer une description valide, le type de clavier peut être par défaut, je peux utiliser la 57 00:04:58,980 --> 00:05:05,700 capitalisation automatique, la correction automatique, mais je ne définirai pas de type de touche de retour 58 00:05:05,700 --> 00:05:14,330 mais ici Je veux définir un multiligne comme ceci, ce qui permet une édition multiligne et un nombre de lignes 59 00:05:14,330 --> 00:05:15,830 défini, disons trois. 60 00:05:15,830 --> 00:05:20,630 Ceci n'est cependant utilisé que par Android mais là, cela limitera le nombre de lignes que vous 61 00:05:20,630 --> 00:05:25,580 pouvez entrer, sur iOS, cela n'aura pas d'effet mais c'est ainsi que vous pouvez maintenant utiliser ce composant 62 00:05:25,580 --> 00:05:27,470 d'entrée et le configurer depuis l'extérieur. 63 00:05:27,470 --> 00:05:30,240 Cela étant dit, comme je l'ai dit, nous 64 00:05:30,260 --> 00:05:35,710 n'avons pas terminé, qu'en est-il de la valeur et de cet écouteur de changement de texte? 65 00:05:35,840 --> 00:05:42,030 Il existe différentes manières de gérer cette entrée de texte ou les valeurs de texte ici. 66 00:05:42,050 --> 00:05:47,960 Vous pouvez toujours simplement le transmettre au composant parent et utiliser uniquement ce composant d'entrée comme un wrapper visuel, mais je 67 00:05:48,080 --> 00:05:49,020 vais aller 68 00:05:49,310 --> 00:05:55,850 un peu plus loin et je veux gérer cette valeur et la validité de cette entrée unique à l'intérieur du composant d'entrée, de 69 00:05:56,180 --> 00:05:58,460 sorte que Je ne fais ensuite que rapporter 70 00:05:58,460 --> 00:06:05,280 à mon composant parent, donc à l'écran de modification du produit à la fin quelle est la valeur actuelle et si elle est valide 71 00:06:05,280 --> 00:06:07,900 ou non afin que la validation n'ait pas besoin 72 00:06:07,940 --> 00:06:11,980 de se produire à l'intérieur du composant parent, mais là encore, c'est totalement actif 73 00:06:12,170 --> 00:06:17,480 à vous si vous voulez le faire ou non. Ici, j'ajouterai une nouvelle constante dans le 74 00:06:17,480 --> 00:06:25,520 composant d'entrée, le gestionnaire de changement de texte où j'obtiens ce texte d'entrée car c'est maintenant ce que je lie ou ce 75 00:06:25,550 --> 00:06:31,400 qui est déjà lié et je le garderai généralement comme ceci, bien que nous n'ayons pas 76 00:06:31,400 --> 00:06:33,380 besoin de l'identifiant ici plus 77 00:06:33,620 --> 00:06:39,560 besoin de lier donc parce que c'est à l'intérieur d'une seule entrée, on n'a pas besoin 78 00:06:39,560 --> 00:06:40,810 d'un identifiant là-bas. 79 00:06:40,880 --> 00:06:44,150 Cela va donc maintenant se déclencher à chaque frappe et 80 00:06:44,150 --> 00:06:56,140 donc maintenant ici, je veux vérifier si cela est valide ou non et gérer également ma valeur de cette entrée. Maintenant, pour cela, nous pouvons à nouveau utiliser un réducteur ou des états individuels 81 00:06:56,140 --> 00:07:02,270 gérés avec l'état d'utilisation ou créés avec l'état d'utilisation, mais je vais opter pour un 82 00:07:02,300 --> 00:07:03,920 réducteur et ici j'ai 83 00:07:04,090 --> 00:07:12,300 mon réducteur d'entrée, le nom dépend de vous, obtient l'état, obtient un l'action et renvoie un nouvel état à la 84 00:07:12,300 --> 00:07:13,110 fin. 85 00:07:13,440 --> 00:07:20,390 Ensuite, ici dans l'entrée, je peux appeler use reducer et forward ou le définir sur le réducteur d'entrée et mon état initial 86 00:07:20,550 --> 00:07:28,200 pour cette entrée sera ici un simple objet Javascript avec trois valeurs. La valeur que vous avez actuellement, qui peut initialement être vide, 87 00:07:28,260 --> 00:07:34,470 mais en fait, je veux me permettre de définir une valeur initiale de l'extérieur car nous en aurons 88 00:07:34,470 --> 00:07:37,230 besoin, par exemple lorsque nous éditons des produits, 89 00:07:37,260 --> 00:07:41,570 donc je vérifie si la valeur initiale des accessoires est définie , encore 90 00:07:41,610 --> 00:07:43,700 une fois, c'est bien sûr un 91 00:07:43,700 --> 00:07:46,980 nom que vous pouvez choisir comme vous le souhaitez 92 00:07:46,980 --> 00:07:49,220 et si tel est le cas, 93 00:07:49,230 --> 00:07:50,040 je 94 00:07:50,130 --> 00:07:53,460 vais le définir sur la valeur initiale des accessoires, sinon 95 00:07:53,460 --> 00:08:03,600 je vais essayer de le définir sur une chaîne vide, puis je gérerai également si cela est valide ou non et là encore, je peux vérifier si les accessoires initialement 96 00:08:03,630 --> 00:08:05,160 valides, disons, sont définis. 97 00:08:05,160 --> 00:08:08,780 Si tel est le cas, je prendrai automatiquement cette valeur qui 98 00:08:08,790 --> 00:08:11,750 devrait être vraie ou fausse, si ce n'est 99 00:08:13,420 --> 00:08:16,440 pas le cas, cela sera automatiquement traité comme faux et 100 00:08:16,450 --> 00:08:23,170 je gérerai également si cela a déjà été touché ou non, donc si l'utilisateur a effectivement tapé ici et cela peut 101 00:08:23,260 --> 00:08:26,850 être utile pour nous aider à fournir une meilleure expérience utilisateur 102 00:08:27,100 --> 00:08:33,760 en ce qui concerne le moment où nous montrons des erreurs de validation et ici, je vais le définir initialement faux. 103 00:08:33,780 --> 00:08:40,260 Maintenant, bien sûr, cela nous renverra l'instantané de l'état d'entrée et une fonction de répartition que je 104 00:08:40,260 --> 00:08:46,920 peux également nommer répartition ici car nous n'aurons aucun conflit de noms et dans le gestionnaire de 105 00:08:46,920 --> 00:08:54,420 changement de texte, bien sûr, je distribuerai une action, une action que j'ai donc créera ici avec un identifiant d'action, 106 00:08:54,420 --> 00:09:00,040 le changement d'entrée par exemple, qui devrait être distribué ici, tapez le changement d'entrée puis 107 00:09:00,040 --> 00:09:08,930 ici dans le réducteur, nous pouvons ajouter une instruction switch pour mélanger les choses, vérifier le type d'action et pour le changement d'entrée 108 00:09:08,960 --> 00:09:16,150 du cas , nous voulons faire quelque chose. Dans le cas par défaut, je vais juste retourner 109 00:09:16,190 --> 00:09:22,400 mon état, donc je ne ferai rien mais ici bien sûr, je veux faire autre chose. 110 00:09:22,630 --> 00:09:27,730 Maintenant ici dans le gestionnaire de changement de texte, évidemment, je distribue la modification d'entrée et je veux transmettre 111 00:09:27,760 --> 00:09:29,320 la valeur que j'ai stockée 112 00:09:29,410 --> 00:09:35,320 dans une clé de valeur mais maintenant ici, je veux aussi faire une validation spécifique à l'entrée et transmettre les informations 113 00:09:35,350 --> 00:09:39,550 si l'entrée est valide ou non . Et pour cela, vous trouverez 114 00:09:39,570 --> 00:09:45,040 ci-joint une configuration de validation ou un code de validation que je vais maintenant vous expliquer. 115 00:09:45,210 --> 00:09:50,760 Ici, j'ai une constante qui configure une expression régulière d'e-mail, donc une expression régulière qui nous permet 116 00:09:50,760 --> 00:09:52,710 de valider des adresses e-mail, 117 00:09:52,710 --> 00:09:58,290 nous n'avons pas encore d'entrée d'adresse e-mail mais plus tard lorsque nous ajouterons l'authentification, nous l'aurons et 118 00:09:58,290 --> 00:10:00,670 je veux pouvoir pour utiliser ce composant 119 00:10:00,780 --> 00:10:04,580 d'entrée, ce composant doit donc être prêt à valider également les e-mails. 120 00:10:04,740 --> 00:10:10,140 Ensuite, j'ai la variable d'assistance est valide ici, car nous avons ici un tas de vérifications. 121 00:10:10,140 --> 00:10:16,610 Maintenant, je veux m'assurer que nous pouvons définir les critères que nous voulons utiliser de l'extérieur avec l'aide d'accessoires.Par exemple, je vérifie 122 00:10:16,620 --> 00:10:21,030 si un accessoire requis est défini, s'il est défini sur true, donc s'il est défini 123 00:10:21,030 --> 00:10:26,610 et si c'est le cas, cette vérification sera effectuée. Si l'accessoire requis n'est pas défini, cette vérification 124 00:10:26,610 --> 00:10:31,620 ne sera pas effectuée et donc cette validation n'est pas effectuée et c'est le cas 125 00:10:31,620 --> 00:10:33,870 pour toutes mes différentes validations ici. 126 00:10:34,080 --> 00:10:40,180 Nous pouvons donc définir un accessoire requis pour vérifier s'il n'est pas vide, s'il est vide, nous définissons est valide sur faux. 127 00:10:40,440 --> 00:10:46,140 Nous pouvons définir un accessoire d'e-mail sur le composant d'entrée pour le valider comme étant une adresse e-mail valide et si ce n'est 128 00:10:46,320 --> 00:10:48,330 pas le cas, nous le définissons sur false. 129 00:10:48,450 --> 00:10:55,260 Nous pouvons vérifier qu'un nombre est trop petit ou trop grand ou une chaîne trop courte avec le 130 00:10:55,260 --> 00:10:56,070 validateur de 131 00:10:56,070 --> 00:11:01,950 longueur minimale et bien sûr, vous pouvez ajouter plus de logique ici, peut-être aussi avec 132 00:11:01,950 --> 00:11:09,800 un package comme ValidateJs que j'ai déjà mentionné plus tôt. Maintenant avec cela, j'aurai est valide à la fin, ce qui est 133 00:11:09,940 --> 00:11:16,520 vrai par défaut mais faux dès qu'une validation échoue et donc maintenant, nous pouvons ajouter est également valide pour cette action 134 00:11:16,520 --> 00:11:17,060 envoyée.