Maintenant, je dirai que nous verrons en détail comment travailler avec les entrées utilisateur et ainsi de suite
dans un module distinct dans le module de cours suivant, donc je ne m'y attarderai pas en ce moment.
La seule chose que je veux faire en ce moment est d'ajouter une entrée de texte ici à l'écran d'édition
du produit, puis de sortir quelques entrées de texte ici qui nous permettent de récupérer les entrées de l'utilisateur et, à la
fin, nous permettent d'ajouter ou de modifier le produit sans aucun validation ou quelque chose de spécial là-dedans.
Je vais donc également importer une vue de défilement, car je commencerai par tout emballer avec une vue
de défilement, car vous pouvez certainement l'afficher sur un petit appareil ou en
mode paysage où tout ne tient pas sur un seul écran. Maintenant, là-bas, nous aurons quelques vues avec les différentes entrées de texte, donc ici, nous
aurons toujours un texte avec une étiquette, comme le titre du produit que vous devez entrer et en dessous, une entrée
de texte qui permet vous entrez ce titre et à la fin, je vais le répéter pour toutes les différentes choses que vous
souhaitez ajouter.
Maintenant, un certain
style sera nécessaire, alors ici pour la saisie de texte, je vais ajouter un style
de saisie et sur le texte ci-dessus, je vais ajouter une étiquette
de style de styles, vous pouvez également donner à cette vue un style global de forme contrôlez
par exemple, tout ce que vous voulez pour le nommer et maintenant nous pouvons répéter cela pour le titre, pour l'imageUrl ici, pour
le prix et enfin et surtout, pour la description. Je vais également envelopper ces choses dans une autre
vue, donc tous ces contrôles de formulaire à la fin, je donnerai un style de style.
Il est maintenant temps de travailler sur ces styles
ici, donc là-bas dans la feuille de style, pour le formulaire, je vais définir une marge de 20 dans toutes les directions, donc
il y a un peu d'espacement autour de ces entrées. Pour mes entrées ici, pour l'étiquette de contrôle de
formulaire et l'entrée, je veux également ajouter quelques styles, donc ici, j'aurai le contrôle de formulaire, mon étiquette et ensuite également l'entrée elle-même, donc le texte
lui-même et pour le contrôle de formulaire , Je veux définir une largeur de 100 pour m'assurer qu'elle
est aussi large que possible. Pour l'étiquette, je définirai
la famille de polices pour ouvrir sans gras pour avoir du texte en gras ici, puis une
marge verticale de 8 pour avoir un espacement en haut et en bas et pour l'entrée
elle-même qui est cet élément d'entrée
de texte, je veux d'avoir un remplissage horizontal de deux, donc un très petit remplissage de sorte
que lorsque nous entrons du texte, nous ne sommes pas directement sur le bord de l'entrée et un remplissage vertical
de 5, donc un petit remplissage en haut et en bas et une bordure en bas couleur de ce léger aspect grisâtre avec ce code hexadécimal de ccc puis une largeur inférieure de bordure
de un et c'est le style que je vais utiliser pour l'instant. Maintenant, si nous y jetons un coup d’œil en allant à l’administrateur et en ajoutant
par exemple un nouveau, voici à quoi il ressemble, il ne semble pas
trop mauvais, certainement pas configuré en aucune façon, mais certains pour commencer et bien
sûr maintenant je veux pouvoir soumettre ceci et l'enregistrer également.
Pour cela, dans l'écran
d'édition du produit, je veux avoir un bouton d'action, donc un bouton dans l'en-tête, donc ici avant les styles peut-être, l'ordre n'a pas d'importance mais j'aime l'avoir juste à
côté du composant, je vais ajouter les options de navigation où j'ai besoin de cette syntaxe dynamique parce que nous devrons
faire quelque chose de dynamique à l'intérieur de l'en-tête, puis ici, nous renvoyons cet objet de configuration où pour
un, vous pouvez définir le titre de l'en-tête et qui devrait également être dynamique car il , Je
veux afficher si nous modifions ou ajoutons, cela dépendra du fait que nous ayons ou non un paramètre d'ID de
produit, afin que nous puissions déjà accéder à navData. la navigation. getParam.
Maintenant, si vous regardez l'écran du produit utilisateur, vous remarquerez que lorsque nous cliquons
sur le bouton modifier, nous transmettons ici le paramètre ID produit pour modifier la navigation du produit, lorsque nous avons cliqué sur l'icône ajouter dans l'en-tête cependant
,
on ne passe pas ça.
Donc, le paramètre d'ID de produit, s'il est disponible, nous savons que nous sommes en mode édition.
Donc, ici, je peux vérifier si nous pouvons obtenir une valeur pour cela et si c'est vrai,
alors je montre éditer le produit comme
titre, sinon je montrerai ajouter un produit parce que c'est un indicateur clair pour moi que nous éditions ou ajouter.
Le titre de l'en-tête n'est pas tout ce qui devrait
faire partie de la
configuration, je veux aussi avoir cette partie droite de l'en-tête pour avoir un bouton qui me permet
de sauvegarder mes données et pour cela, je vais aller à l'écran des produits
utilisateur et copier cette configuration que j'ai là-bas avec les boutons d'en-tête, copiez cela sur l'écran de modification du produit et
bien sûr, copiez également les importations de bouton d'en-tête et de boutons d'en-tête et l'élément pour modifier l'écran du produit et ajoutez ceci ici et maintenant bien sûr, nous
besoin de peaufiner cela un peu, car un bouton d'ajout n'a certainement pas de sens
ici, enregistrer semble être une étiquette plus appropriée et l'icône que je veux utiliser est donc la coche md et la
coche iOS qui rendent une belle icône de coche. Bien sûr, ici, je ne veux pas non plus naviguer pour
modifier le produit, mais à la place, je veux soumettre mon formulaire et c'est quelque chose sur lequel nous travaillerons dans une seconde.
Tout d'abord, nous devons nous assurer que nous pouvons enregistrer toutes les entrées de l'utilisateur et
que nous avons également prérempli ce formulaire au cas où nous le modifierions. Donc, pour enregistrer l'entrée utilisateur, nous pouvons utiliser le crochet d'état d'utilisation de
React et gérer simplement l'état de chacune de
ces entrées de texte, nous aurons donc quatre états ici à
la fin avec l'état d'utilisation, chacun initialisé dans une chaîne vide initialement et puis nous avons le titre
et définissons le titre et répétons cela fondamentalement pour avoir également comme imageUrl et définir imageUrl et puis ici, avoir le prix et
définir le prix
et puis ici aussi avoir la description et définir la description et encore, nous affinerons cela dans le module suivant où
nous approfondissons la gestion des entrées utilisateur.
Pour l'instant, je vais simplement le lier à mon entrée de texte, la valeur ici est liée au titre pour cette première
qui est mon entrée de titre et sur le texte de changement ici, je reçois mon texte ici qui a changé et je l'enregistrerai définissez le titre dans ce cas ici, afin que je
mette à jour mon état de titre avec le texte du titre nouvellement entré. Et maintenant, c'est ce modèle que nous ajoutons à
toutes ces entrées de texte ici, ici bien
sûr pour la deuxième, nous parlons de l'imageUrl et définissons l'imageUrl mais à part cela, c'est
la même chose. Pour le prix,
sans surprise on répercute le prix et on appelle prix fixe mais à part ça, c'est pareil.
Veuillez noter que le prix est donc bien sûr également géré comme une chaîne
ici car tout ce que l'utilisateur saisit est toujours du texte et ici pour la saisie de texte, je vais passer ma description et définir ma description
ici.
Avec cela, les données sont gérées, maintenant pour préremplir que lorsque nous avons une recette, lorsque nous chargeons un produit et que nous
sommes en mode édition, nous avons juste besoin d'obtenir notre ID de produit à l'aide de la navigation des accessoires get param, là ,
l'ID produit est un paramètre que nous pouvons corriger récupérer et si l'ID prod est défini, eh bien je sais que nous
sommes en mode édition et je veux bien sûr pré-remplir mes champs ici avec les valeurs.
Maintenant, en fait, cela signifie que je veux charger mon produit en fonction de l'ID de prod de mon état Redux.
Nous importons donc le sélecteur d'utilisation de React Redux ici et maintenant ici, nous pouvons obtenir notre produit modifié en tendant la main avec le sélecteur d'utilisation à notre état Redux et maintenant ici bien sûr, nous devons plonger dans notre tranche de produit et vous
pouvez toujours consulter votre réducteur si vous ne savez pas comment
il a été structuré à nouveau et là, nous voyons dans la partie produits de notre
réducteur, de notre magasin Redux je dois dire, nous avons ce tableau de produits utilisateur
à la fin, c'est donc ce qui m'intéresse ici, je contacte les produits
utilisateur et maintenant je
veux trouver le produit avec cet ID de prod. Alors ici, je vais jeter un œil à chaque
produit, la fonction de recherche le fait pour moi et je veux retourner vrai si l'ID
du produit que je regarde est égal à l'ID de produit que j'ai récupéré de mes paramètres.
Maintenant, bien sûr, parfois, cela ne produira rien si l'ID de prod n'est pas défini car
ce paramètre n'est pas défini, ce qui est toujours le cas lorsque nous avons cliqué sur ce bouton Ajouter, alors ce
paramètre ne sera jamais défini, mais c'est correct. Le produit édité sera alors simplement indéfini, ce qui est tout à fait correct. Sinon, si le produit édité n'est
pas indéfini, s'il est défini par conséquent, nous savons que nous sommes en mode
édition et que nous pouvons donc préremplir nos valeurs. Par conséquent, je vais le faire avant d'initialiser mon état, car
c'est quelque chose que je veux initialiser selon que nous avons chargé un produit ou non.
Donc, le titre ici, en fait là, je vérifierai si le produit édité, s'il est défini, s'il
est défini, puis j'initialiserai le titre à éditer Produit. title, sinon ce sera une
chaîne vide et j'aurai la même logique pour l'imageUrl ici.
Donc ici je fais ça pour imageUrl, pas pour le prix car le prix ne doit pas être modifiable mais je
le ferai pour la description.
Ainsi, la valeur par défaut du titre, de l'imageUrl et de la
description dépend de la présence ou non d'un produit modifié. Et maintenant avec cela, puisque nous définissons cela sur l'état, cela
sera automatiquement alimenté dans nos entrées de texte et la seule chose est, je dois m'assurer que
je supprime l'entrée de prix ici si nous sommes en mode édition. Je vais donc vérifier si le produit édité est défini ici et si
c'est le cas, alors je retournerai
null ici et seulement sinon
s'il n'est pas défini, donc si je suis en mode ajout, pas en mode édition, je le rendrai entrée de prix ici, de sorte que l'entrée
de prix soit supprimée si nous modifions car je ne peux pas la modifier de toute façon.
Alors maintenant, essayons et revenons à l'écran d'administration. Si je clique sur ajouter, oui, je dois rajouter l'importation
de la plate-forme car j'utilise cela dans le bouton d'en-tête pour afficher la coche,
les icônes dépendant de la plate-forme.
Assurons-nous donc d'importer la plate-forme sur l'écran d'édition du produit, mais maintenant, si je clique sur ajouter,
nous voyons les quatre importations, toutes vides au début. Par contre, si je clique sur modifier, ils sont préremplis et
je ne vois pas le prix qui correspond exactement à ce que je veux.
Il est maintenant temps de s'assurer que lorsque nous soumettons cela, nous mettons à
jour notre produit si nous le modifions ou si nous l'ajoutons, nous ajoutons un nouveau produit.
Encore une fois, pour l'instant je n'ajouterai aucune validation, nous le ferons plus tard.
Donc pour l'instant, nous pouvons également soumettre un produit vide, plus tard après le prochain module,
cela ne sera plus possible.