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
c'est du code très simple.
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
cette action, l'autre est isValid et c'est l'autre chose que je veux également mettre à
jour à chaque frappe, isValid pour cette entrée, pas pour le formulaire
entier mais pour cette entrée gérée en interne. Je ne mettrai pas à jour le toucher ici, mais le toucher devrait être
mis à jour lorsque nous perdons le focus, car cela signifie que l'utilisateur a fini d'entrer du contenu
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
fonction que j'ajoute et là, je vais envoyer une
action. Maintenant, pour
cela, je vais créer un identifiant d'action
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
un autre cas, flou de saisie et si tel est le cas, je retourne un nouvel état où je copie l'ancien état
parce que je veux garder la valeur et est valide et ne pas changer
cela mais je veux mettre touched à true, donc dès que lorsque nous floutons une entrée, elle est traitée comme touchée.
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
que cela se déclenche lorsque cette entrée est floue.
Maintenant, c'est très bien et cela va gérer l'état à l'intérieur de cette entrée, bien sûr,
j'ai encore besoin de transmettre la valeur et les informations, que cette entrée soit
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
ici
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 à
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
que dans le composant parent, nous pouvons ajouter ici une fonction qui écoute cela à la fin, qui est déclenchée,
qui reçoit ces deux arguments, puis dans le parent, donc dans le composant écran,
nous pouvons mettre à jour notre état là-bas. Maintenant, l'important est de savoir quand cet effet d'utilisation
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
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
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.
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
toujours cette fonction sur le composant parent que si la touche est vraie, donc cet effet s'exécutera
plus souvent mais la plupart du temps il ne fera rien tant que toucher n'est pas vrai et les accessoires sont
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
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
avons besoin là-bas et maintenant nous pouvons ajouter que c'est une dépendance et les autres choses, d'autres changements dans
les accessoires ne déclencheront pas cela.
Alors maintenant, nous appelons cela sur le composant parent chaque fois que cela est touché, puis nous transmettons la valeur et
la validité de cette entrée au composant parent.
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
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
à obtenir une fonction en tant que valeur qui, à son tour, recevra deux arguments
lorsqu'elle sera appelée - la valeur et la validité de cette entrée.
Donc, ici, je veux pointer sur une fonction et cela peut être notre disons gestionnaire de changement d'entrée, nous pouvons recycler cela,
je le renomme simplement pour être plus approprié.
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
veux réutiliser cela pour toutes mes entrées et maintenant depuis que je suis dans
le composant écran, nous aurons plusieurs entrées et là , nous obtenons donc notre identifiant, puis nous obtenons la valeur et les informations
sont valides, non?
Donc, la valeur d'entrée et la validité d'entrée, c'est ce que nous obtenons, n'est-ce pas, parce
que c'est ce que nous transmettons de l'intérieur du composant d'entrée
ici, c'est ce que nous
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é
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
n'est
qu'une restriction que j'ai ajoutée
ici, que vous devez avoir perdu le focus, vous pourrait bien sûr aussi aller au
composant d'entrée et le supprimer si cochez pour mettre à jour la validité et la valeur
dans le composant parent pour chaque entrée, pour chaque frappe. Maintenant, une chose supplémentaire que je veux faire, je veux
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
cette fonction à lors du changement d'entrée dans le composant d'entrée et là d'autre part, c'est une
dépendance
de cet effet, donc cet
effet se réexécutera chaque fois que cela changera.
Donc, cela ne devrait pas changer trop souvent pour éviter les exécutions d'effets inutiles et
ici nous devons donc indiquer nos dépendances et la seule dépendance que nous avons est l'état du formulaire de répartition
qui ne changera jamais, donc nous sommes bons,
cela ne
devrait jamais être reconstruit parce que le la logique là-dedans ne
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
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
que je dois gérer chaque entrée ici, nous
le faisons à l'intérieur du composant d'entrée à la place. Pour la soumission et ainsi de
suite, nous
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
prop et si cela doit être initialement
valide, donc si je reviens à l'écran de modification du produit, nous devons maintenant définir la valeur initiale ici sur quelle?
Eh bien, nous pouvons vérifier si nous avons un produit édité et si nous le faisons, alors la valeur initiale ici
devrait être éditéeProduct. title,
sinon c'est une chaîne vide et cela devrait être initialement valide, alors utilisez cet accessoire ici si
nous avons un produit
édité, donc si c'est
le cas, avec le double coup ici, si c'est vrai. Si nous n'avons pas de produit édité, cela ne peut pas être
initialement
valide, alors je passe false,
ce qui est bien, ce qui devrait être le cas.
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
comme valeur par défaut, à part cela, elle peut rester comme ça. Pour le prix, nous n'aurons jamais de valeur initiale et
elle ne sera jamais initialement valable. Pour la description d'autre part, nous pouvons
à nouveau ajouter ceci et pointer ici la description.
Maintenant, avec cela, il y a une chose que je dois corriger dans le composant d'entrée auquel je viens également de
penser, bien sûr ici, l'état de forme n'est plus disponible, à la place, nous
avons notre état interne ici et j'ai nommé cet état d'entrée, c'est ce que
mon réducteur retourne, nous devons donc
l'utiliser ici bien sûr.
Nous avons donc ici inputState. valeur comme valeur, c'est aussi simple que
cela et nous avons ici inputState. isValid comme chèque et cela devrait être tout.
Maintenant, si nous enregistrons ceci et examinons cela, voyons si cela fonctionne. Si nous allons ici, nous avons tous les messages d'erreur
initialement, ce qui est logique car ils sont tous invalides au
départ, si je commence à taper ici, j'obtiens une erreur, je ne trouve pas la variable isValid dans mon composant d'entrée,
qui doit être dans ce gestionnaire qui se déclenche pour chaque frappe, probablement ici, oui dans le réducteur bien sûr,
je devrais vérifier l'action.
isValid, pas seulement isValid, je dois
obtenir cela de l'action. Donc, avec ce correctif
ici, revenons en arrière et réessayons. Si je commence à taper, cela est
effacé, si je reviens à cela, mon erreur ne revient pas, donc c'est une
petite erreur que nous devrons corriger. Pour le prix, 0 n'est
alors pas considéré comme valide, on ne l'est pas non plus, donc la
validation a quelques problèmes mais la saisie et ainsi
de suite fonctionne mais voyons ce qui ne va pas avec la validation maintenant.
Bien sûr, la façon dont la validation fonctionne ici, nous ne l'utilisons pas.
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
faisons à l'aide de ces accessoires spéciaux que nous devons définir. À l'heure actuelle, aucune validation
n'est activée, donc seules les valeurs non valides par défaut sont prises en compte.
Donc, si je vais à l'écran d'édition du produit, nous activons maintenant cette validation spéciale en définissant les
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
min égal à zéro, de sorte que zéro est le nombre minimum que nous devons entrer ou un
nombre
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
minimale égale à 5, pour avoir au moins 5 caractères. Il y a aussi une chose supplémentaire que nous devons faire
ici dans l'écran d'édition du produit, ce gestionnaire de changement d'entrée ici doit également être ajouté à chaque entrée
bien sûr, pas seulement à l'entrée du titre. Nous devons donc ajouter ceci pour
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
de description et remplacer l'identifiant dans le bon sens.
Alors testons cela et vous remarquerez quelque chose d'étrange, si vous
tapez ici, cela fonctionne, si vous tapez dans l'imageUrl, ne
fonctionne pas correctement, la validation ne
se met pas à jour et vous ne pouvez pas non plus revenir en arrière, au moins cela pourrait être bloqué.
Donc, si nous rechargeons cela avec une erreur de commande ou en appuyant deux fois sur R sur Android et que nous
essayons à nouveau ici, disons sur le prix que vous remarquerez que cela fonctionne, mais pourquoi cela
ne fonctionne pas et que ce serait le cas d'ailleurs si vous l'avez
essayé sur l'imageUrl, ici cela fonctionne. Pourquoi ça marche si j'ai déjà édité une autre entrée
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.
Nous rendons ce composant trop souvent et la raison en est très difficile à trouver.
En fin de compte, nous avons une sorte de
boucle infinie ici et le problème est notre gestionnaire de changement d'entrée.
Nous utilisons le rappel ici pour éviter les recréations inutiles, mais en le liant comme ceci, nous rendons ce
type obsolète, cela ne fait aucune différence maintenant car cela créera une nouvelle liaison de fonction pour chaque
cycle de rendu.
Donc, à la fin, ce que nous devons faire, c'est que nous devons supprimer le lien ici, le supprimer ici
à tous ces endroits, car
cela cassera notre application, cela provoquera trop de cycles de rendu en raison de l'utilisation du
rappel n'ayant pas d'effet et à la place, nous pourrions voulez
transmettre un accessoire ID de titre et ainsi de suite à notre composant d'entrée.
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
le transmettons simplement au composant d'entrée afin que nous puissions l'utiliser là-dedans, faisons
cela pour toutes ces entrées ici et maintenant, comment pouvons-nous utiliser cela?
Bien à l'intérieur de l'entrée, nous avons maintenant cet accessoire d'identification disponible à
droite, nous pouvons donc simplement le joindre.
Donc, ici, nous pouvons transmettre des accessoires. id ou simplement ID afin que nous n'ayons pas à ajouter d'accessoires ici
et à la place retirer ID des accessoires ici comme nous l'avons fait avec lors du changement d'entrée et ajouter
ID comme dépendance de cet effet par la suite. Et maintenant, avec cela, nous transmettons toujours l'identifiant
de cette entrée mais d'une manière plus élégante qui évite d'utiliser bind qui recrée finalement
cette fonction pour chaque cycle de rendu et conduit donc
à une boucle infinie et donc maintenant si nous rechargeons ceci et nous
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
cycle de rendu infini et nous obtenons la validation comme nous le voulions.
Alors maintenant, c'est mon approche ou c'est l'approche que je voulais vous montrer ici, que vous pouvez utiliser pour avoir
un composant d'entrée réutilisable qui fait sa propre validation, que vous pouvez configurer de l'extérieur et où
vous pouvez toujours gérer le formulaire global.
Avec cela, plongeons dans quelques ajustements, comme
par exemple le style de ce message d'erreur que nous affichons, ce message d'erreur de validation et également le contrôle lorsque
nous l'afficherons parce que je ne veux pas l'afficher tout le temps.