Alors, comment pouvons-nous optimiser cela?
Eh bien, vous remarquerez peut-être que ce code jsx peut à la fin être répété encore et encore, chaque entrée
ressemble à ceci.
Nous avons une vue, nous avons une étiquette avec le texte lui-même et nous pourrions aussi vouloir du texte d'erreur que
nous pouvons afficher.
Il serait donc logique d'externaliser cela dans un composant distinct et
c'est exactement ce que je veux faire.
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
réagir de réagir bien sûr, puis importer quelques éléments de React Native et ces choses à la
fin sont ma vue, le composant texte, le composant de saisie de texte et la feuille de style parce que
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
accessoires et doit retourner du jsx. Nous aurons un objet styles avec Feuille de style. créer et bien sûr
à la fin, nous l'exportons par défaut ici, ce composant.
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
saisie de texte et cette partie du message d'erreur, coupez-le d'ici, hors de
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.
Maintenant, bien sûr, nous devons ajuster cela un peu, mais c'est notre squelette général que je veux utiliser
ici.
Maintenant, également à partir de l'écran de modification du produit, je
prendrai le style, cette étiquette de contrôle de formulaire et le style d'entrée peuvent tous être supprimés
et doivent être déplacés dans le composant d'entrée et là dans la feuille de style.
Alors maintenant avec ça bien sûr, cela ne peut être utilisé que pour un titre et je veux
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
m'attends à obtenir cela sur une étiquette nommée accessoire peut-être.
En général, je veux également m'assurer que la saisie de texte peut être configurée de l'extérieur, je
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
serons en mesure de définir des choses comme le type de clavier parce que je ne veux pas coder en
dur
ici, à la place, cela devrait être un wrapper réutilisable autour du composant d'entrée de texte qui peut être
configuré de l'extérieur.
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
ces écouteurs car on n'en a pas vraiment besoin.
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
ici et bien sûr, vous
pouvez comme toujours donner à ces accessoires tous les noms que vous voulez, bien
sûr, nous devrons également changer ce que nous attribuons ici en tant que valeur et ainsi de suite,
cela va également changer.
Mais maintenant, nous pouvons déjà commencer
à 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
dossier UI et là de l'entrée et ensuite nous peut commencer
à utiliser le composant d'entrée à l'endroit où j'avais précédemment mon composant d'entrée de
texte ici.
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
clavier et ainsi de suite car cela sera transmis.
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
tout ce que nous ferons en ce qui concerne la validation, mais c'est un début.
C'est ainsi que nous pouvons ensuite utiliser
cette entrée et bien sûr, c'est aussi ainsi que nous pouvons maintenant l'utiliser pour remplacer les autres entrées.
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
correction automatique de la capitalisation automatique n'est pas requise, retournez le type de clé ensuite, nous pouvons laisser cela,
nous
ne le faisons pas quoi que ce soit avec cela, nous pourrions ajouter un
peu de logique, mais je ne le fais pas ici. Pour le prix, je vais laisser le rendu conditionnel, mais là-dedans, je
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,
pas besoin de majuscule automatique ou la correction automatique alors débarrassons-nous de cela. Et pour la description ici, je vais également
ajouter mon entrée ici, description, veuillez entrer une description valide, le type de clavier peut être par défaut, je peux utiliser la
capitalisation automatique, la correction automatique, mais je ne définirai pas de type de touche de retour
mais ici Je veux définir un multiligne comme ceci, ce qui permet une édition multiligne et un nombre de lignes
défini, disons trois.
Ceci n'est cependant utilisé que par Android mais là, cela limitera le nombre de lignes que vous
pouvez entrer, sur iOS, cela n'aura pas d'effet mais c'est ainsi que vous pouvez maintenant utiliser ce composant
d'entrée et le configurer depuis l'extérieur.
Cela étant dit, comme je l'ai dit, nous
n'avons pas terminé, qu'en est-il de la valeur et de cet écouteur de changement de texte?
Il existe différentes manières de gérer cette entrée de texte ou les valeurs de texte ici.
Vous pouvez toujours simplement le transmettre au composant parent et utiliser uniquement ce composant d'entrée comme un wrapper visuel, mais je
vais aller
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
sorte que Je ne fais ensuite que rapporter
à mon composant parent, donc à l'écran de modification du produit à la fin quelle est la valeur actuelle et si elle est valide
ou non afin que la validation n'ait pas besoin
de se produire à l'intérieur du composant parent, mais là encore, c'est totalement actif
à vous si vous voulez le faire ou non. Ici, j'ajouterai une nouvelle constante dans le
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
qui est déjà lié et je le garderai généralement comme ceci, bien que nous n'ayons pas
besoin de l'identifiant ici plus
besoin de lier donc parce que c'est à l'intérieur d'une seule entrée, on n'a pas besoin
d'un identifiant là-bas.
Cela va donc maintenant se déclencher à chaque frappe et
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
gérés avec l'état d'utilisation ou créés avec l'état d'utilisation, mais je vais opter pour un
réducteur et ici j'ai
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
fin.
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
pour cette entrée sera ici un simple objet Javascript avec trois valeurs. La valeur que vous avez actuellement, qui peut initialement être vide,
mais en fait, je veux me permettre de définir une valeur initiale de l'extérieur car nous en aurons
besoin, par exemple lorsque nous éditons des produits,
donc je vérifie si la valeur initiale des accessoires est définie , encore
une fois, c'est bien sûr un
nom que vous pouvez choisir comme vous le souhaitez
et si tel est le cas,
je
vais le définir sur la valeur initiale des accessoires, sinon
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
valides, disons, sont définis.
Si tel est le cas, je prendrai automatiquement cette valeur qui
devrait être vraie ou fausse, si ce n'est
pas le cas, cela sera automatiquement traité comme faux et
je gérerai également si cela a déjà été touché ou non, donc si l'utilisateur a effectivement tapé ici et cela peut
être utile pour nous aider à fournir une meilleure expérience utilisateur
en ce qui concerne le moment où nous montrons des erreurs de validation et ici, je vais le définir initialement faux.
Maintenant, bien sûr, cela nous renverra l'instantané de l'état d'entrée et une fonction de répartition que je
peux également nommer répartition ici car nous n'aurons aucun conflit de noms et dans le gestionnaire de
changement de texte, bien sûr, je distribuerai une action, une action que j'ai donc créera ici avec un identifiant d'action,
le changement d'entrée par exemple, qui devrait être distribué ici, tapez le changement d'entrée puis
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
du cas , nous voulons faire quelque chose. Dans le cas par défaut, je vais juste retourner
mon état, donc je ne ferai rien mais ici bien sûr, je veux faire autre chose.
Maintenant ici dans le gestionnaire de changement de texte, évidemment, je distribue la modification d'entrée et je veux transmettre
la valeur que j'ai stockée
dans une clé de valeur mais maintenant ici, je veux aussi faire une validation spécifique à l'entrée et transmettre les informations
si l'entrée est valide ou non . Et pour cela, vous trouverez
ci-joint une configuration de validation ou un code de validation que je vais maintenant vous expliquer.
Ici, j'ai une constante qui configure une expression régulière d'e-mail, donc une expression régulière qui nous permet
de valider des adresses e-mail,
nous n'avons pas encore d'entrée d'adresse e-mail mais plus tard lorsque nous ajouterons l'authentification, nous l'aurons et
je veux pouvoir pour utiliser ce composant
d'entrée, ce composant doit donc être prêt à valider également les e-mails.
Ensuite, j'ai la variable d'assistance est valide ici, car nous avons ici un tas de vérifications.
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
si un accessoire requis est défini, s'il est défini sur true, donc s'il est défini
et si c'est le cas, cette vérification sera effectuée. Si l'accessoire requis n'est pas défini, cette vérification
ne sera pas effectuée et donc cette validation n'est pas effectuée et c'est le cas
pour toutes mes différentes validations ici.
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.
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
pas le cas, nous le définissons sur false.
Nous pouvons vérifier qu'un nombre est trop petit ou trop grand ou une chaîne trop courte avec le
validateur de
longueur minimale et bien sûr, vous pouvez ajouter plus de logique ici, peut-être aussi avec
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
vrai par défaut mais faux dès qu'une validation échoue et donc maintenant, nous pouvons ajouter est également valide pour cette action
envoyée.