1
00:00:02,270 --> 00:00:07,790
Maintenant, je dirai que nous verrons en détail comment travailler avec les entrées utilisateur et ainsi de suite

2
00:00:07,790 --> 00:00:13,530
dans un module distinct dans le module de cours suivant, donc je ne m'y attarderai pas en ce moment.

3
00:00:13,640 --> 00:00:19,460
La seule chose que je veux faire en ce moment est d'ajouter une entrée de texte ici à l'écran d'édition

4
00:00:19,460 --> 00:00:25,730
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

5
00:00:25,730 --> 00:00:31,010
fin, nous permettent d'ajouter ou de modifier le produit sans aucun validation ou quelque chose de spécial là-dedans.

6
00:00:31,010 --> 00:00:37,900
Je vais donc également importer une vue de défilement, car je commencerai par tout emballer avec une vue

7
00:00:37,940 --> 00:00:43,160
de défilement, car vous pouvez certainement l'afficher sur un petit appareil ou en

8
00:00:43,160 --> 00:00:52,000
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

9
00:00:52,000 --> 00:00:57,640
aurons toujours un texte avec une étiquette, comme le titre du produit que vous devez entrer et en dessous, une entrée

10
00:00:57,640 --> 00:01:03,700
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

11
00:01:03,850 --> 00:01:04,500
souhaitez ajouter.

12
00:01:05,460 --> 00:01:07,170
Maintenant, un certain

13
00:01:07,170 --> 00:01:14,220
style sera nécessaire, alors ici pour la saisie de texte, je vais ajouter un style

14
00:01:15,000 --> 00:01:20,310
de saisie et sur le texte ci-dessus, je vais ajouter une étiquette

15
00:01:20,440 --> 00:01:28,250
de style de styles, vous pouvez également donner à cette vue un style global de forme contrôlez

16
00:01:28,390 --> 00:01:38,710
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

17
00:01:38,800 --> 00:01:47,470
le prix et enfin et surtout, pour la description. Je vais également envelopper ces choses dans une autre

18
00:01:47,460 --> 00:01:55,000
vue, donc tous ces contrôles de formulaire à la fin, je donnerai un style de style.

19
00:01:57,490 --> 00:02:00,370
Il est maintenant temps de travailler sur ces styles

20
00:02:00,400 --> 00:02:07,490
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

21
00:02:07,490 --> 00:02:13,690
il y a un peu d'espacement autour de ces entrées. Pour mes entrées ici, pour l'étiquette de contrôle de

22
00:02:13,690 --> 00:02:22,800
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

23
00:02:22,810 --> 00:02:29,270
lui-même et pour le contrôle de formulaire , Je veux définir une largeur de 100 pour m'assurer qu'elle

24
00:02:29,270 --> 00:02:33,390
est aussi large que possible. Pour l'étiquette, je définirai

25
00:02:33,430 --> 00:02:39,450
la famille de polices pour ouvrir sans gras pour avoir du texte en gras ici, puis une

26
00:02:39,450 --> 00:02:45,090
marge verticale de 8 pour avoir un espacement en haut et en bas et pour l'entrée

27
00:02:45,510 --> 00:02:47,580
elle-même qui est cet élément d'entrée

28
00:02:47,580 --> 00:02:53,580
de texte, je veux d'avoir un remplissage horizontal de deux, donc un très petit remplissage de sorte

29
00:02:53,580 --> 00:03:00,800
que lorsque nous entrons du texte, nous ne sommes pas directement sur le bord de l'entrée et un remplissage vertical

30
00:03:00,810 --> 00:03:12,900
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

31
00:03:12,900 --> 00:03:21,630
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

32
00:03:21,660 --> 00:03:25,340
par exemple un nouveau, voici à quoi il ressemble, il ne semble pas

33
00:03:25,380 --> 00:03:29,450
trop mauvais, certainement pas configuré en aucune façon, mais certains pour commencer et bien

34
00:03:30,000 --> 00:03:33,220
sûr maintenant je veux pouvoir soumettre ceci et l'enregistrer également.

35
00:03:33,420 --> 00:03:34,960
Pour cela, dans l'écran

36
00:03:34,990 --> 00:03:44,160
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 à

37
00:03:44,220 --> 00:03:50,730
côté du composant, je vais ajouter les options de navigation où j'ai besoin de cette syntaxe dynamique parce que nous devrons

38
00:03:50,730 --> 00:03:56,910
faire quelque chose de dynamique à l'intérieur de l'en-tête, puis ici, nous renvoyons cet objet de configuration où pour

39
00:03:56,910 --> 00:04:02,670
un, vous pouvez définir le titre de l'en-tête et qui devrait également être dynamique car il , Je

40
00:04:02,670 --> 00:04:09,090
veux afficher si nous modifions ou ajoutons, cela dépendra du fait que nous ayons ou non un paramètre d'ID de

41
00:04:09,090 --> 00:04:17,490
produit, afin que nous puissions déjà accéder à navData. la navigation. getParam.

42
00:04:17,490 --> 00:04:23,010
Maintenant, si vous regardez l'écran du produit utilisateur, vous remarquerez que lorsque nous cliquons

43
00:04:23,370 --> 00:04:33,630
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

44
00:04:33,630 --> 00:04:34,190
,

45
00:04:34,200 --> 00:04:36,150
on ne passe pas ça.

46
00:04:36,480 --> 00:04:41,420
Donc, le paramètre d'ID de produit, s'il est disponible, nous savons que nous sommes en mode édition.

47
00:04:41,550 --> 00:04:46,410
Donc, ici, je peux vérifier si nous pouvons obtenir une valeur pour cela et si c'est vrai,

48
00:04:46,410 --> 00:04:48,640
alors je montre éditer le produit comme

49
00:04:48,650 --> 00:04:54,390
titre, sinon je montrerai ajouter un produit parce que c'est un indicateur clair pour moi que nous éditions ou ajouter.

50
00:04:55,350 --> 00:04:59,050
Le titre de l'en-tête n'est pas tout ce qui devrait

51
00:04:59,220 --> 00:05:01,260
faire partie de la

52
00:05:01,260 --> 00:05:07,140
configuration, je veux aussi avoir cette partie droite de l'en-tête pour avoir un bouton qui me permet

53
00:05:07,170 --> 00:05:12,140
de sauvegarder mes données et pour cela, je vais aller à l'écran des produits

54
00:05:12,330 --> 00:05:19,740
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

55
00:05:19,740 --> 00:05:29,850
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

56
00:05:29,850 --> 00:05:35,280
besoin de peaufiner cela un peu, car un bouton d'ajout n'a certainement pas de sens

57
00:05:35,280 --> 00:05:42,570
ici, enregistrer semble être une étiquette plus appropriée et l'icône que je veux utiliser est donc la coche md et la

58
00:05:42,600 --> 00:05:49,220
coche iOS qui rendent une belle icône de coche. Bien sûr, ici, je ne veux pas non plus naviguer pour

59
00:05:49,250 --> 00:05:55,470
modifier le produit, mais à la place, je veux soumettre mon formulaire et c'est quelque chose sur lequel nous travaillerons dans une seconde.

60
00:05:55,490 --> 00:06:01,250
Tout d'abord, nous devons nous assurer que nous pouvons enregistrer toutes les entrées de l'utilisateur et

61
00:06:01,250 --> 00:06:11,520
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

62
00:06:11,520 --> 00:06:14,810
React et gérer simplement l'état de chacune de

63
00:06:15,000 --> 00:06:19,560
ces entrées de texte, nous aurons donc quatre états ici à

64
00:06:19,620 --> 00:06:26,920
la fin avec l'état d'utilisation, chacun initialisé dans une chaîne vide initialement et puis nous avons le titre

65
00:06:26,920 --> 00:06:36,190
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

66
00:06:36,580 --> 00:06:37,990
définir le prix

67
00:06:38,140 --> 00:06:46,390
et puis ici aussi avoir la description et définir la description et encore, nous affinerons cela dans le module suivant où

68
00:06:46,390 --> 00:06:49,340
nous approfondissons la gestion des entrées utilisateur.

69
00:06:49,360 --> 00:06:55,210
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

70
00:06:55,210 --> 00:07:04,090
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

71
00:07:04,350 --> 00:07:11,920
mette à jour mon état de titre avec le texte du titre nouvellement entré. Et maintenant, c'est ce modèle que nous ajoutons à

72
00:07:11,920 --> 00:07:15,550
toutes ces entrées de texte ici, ici bien

73
00:07:15,730 --> 00:07:22,270
sûr pour la deuxième, nous parlons de l'imageUrl et définissons l'imageUrl mais à part cela, c'est

74
00:07:22,270 --> 00:07:25,390
la même chose. Pour le prix,

75
00:07:25,390 --> 00:07:31,700
sans surprise on répercute le prix et on appelle prix fixe mais à part ça, c'est pareil.

76
00:07:31,720 --> 00:07:36,550
Veuillez noter que le prix est donc bien sûr également géré comme une chaîne

77
00:07:36,550 --> 00:07:45,880
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

78
00:07:45,880 --> 00:07:46,340
ici.

79
00:07:47,980 --> 00:07:57,550
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

80
00:07:57,550 --> 00:08:07,590
sommes en mode édition, nous avons juste besoin d'obtenir notre ID de produit à l'aide de la navigation des accessoires get param, là ,

81
00:08:08,010 --> 00:08:17,250
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

82
00:08:17,250 --> 00:08:24,060
sommes en mode édition et je veux bien sûr pré-remplir mes champs ici avec les valeurs.

83
00:08:24,190 --> 00:08:31,870
Maintenant, en fait, cela signifie que je veux charger mon produit en fonction de l'ID de prod de mon état Redux.

84
00:08:31,870 --> 00:08:47,340
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

85
00:08:47,340 --> 00:08:51,170
pouvez toujours consulter votre réducteur si vous ne savez pas comment

86
00:08:51,210 --> 00:08:56,640
il a été structuré à nouveau et là, nous voyons dans la partie produits de notre

87
00:08:56,640 --> 00:09:01,740
réducteur, de notre magasin Redux je dois dire, nous avons ce tableau de produits utilisateur

88
00:09:01,800 --> 00:09:06,180
à la fin, c'est donc ce qui m'intéresse ici, je contacte les produits

89
00:09:06,270 --> 00:09:07,820
utilisateur et maintenant je

90
00:09:07,850 --> 00:09:13,870
veux trouver le produit avec cet ID de prod. Alors ici, je vais jeter un œil à chaque

91
00:09:13,870 --> 00:09:19,060
produit, la fonction de recherche le fait pour moi et je veux retourner vrai si l'ID

92
00:09:19,060 --> 00:09:24,330
du produit que je regarde est égal à l'ID de produit que j'ai récupéré de mes paramètres.

93
00:09:24,730 --> 00:09:29,710
Maintenant, bien sûr, parfois, cela ne produira rien si l'ID de prod n'est pas défini car

94
00:09:29,710 --> 00:09:36,370
ce paramètre n'est pas défini, ce qui est toujours le cas lorsque nous avons cliqué sur ce bouton Ajouter, alors ce

95
00:09:36,370 --> 00:09:44,620
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

96
00:09:44,620 --> 00:09:50,470
pas indéfini, s'il est défini par conséquent, nous savons que nous sommes en mode

97
00:09:50,470 --> 00:09:58,210
édition et que nous pouvons donc préremplir nos valeurs. Par conséquent, je vais le faire avant d'initialiser mon état, car

98
00:09:58,230 --> 00:10:03,120
c'est quelque chose que je veux initialiser selon que nous avons chargé un produit ou non.

99
00:10:04,320 --> 00:10:09,750
Donc, le titre ici, en fait là, je vérifierai si le produit édité, s'il est défini, s'il

100
00:10:09,750 --> 00:10:15,720
est défini, puis j'initialiserai le titre à éditer Produit. title, sinon ce sera une

101
00:10:15,720 --> 00:10:21,560
chaîne vide et j'aurai la même logique pour l'imageUrl ici.

102
00:10:21,600 --> 00:10:28,980
Donc ici je fais ça pour imageUrl, pas pour le prix car le prix ne doit pas être modifiable mais je

103
00:10:29,070 --> 00:10:31,250
le ferai pour la description.

104
00:10:32,200 --> 00:10:36,520
Ainsi, la valeur par défaut du titre, de l'imageUrl et de la

105
00:10:36,520 --> 00:10:43,870
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

106
00:10:43,870 --> 00:10:48,910
sera automatiquement alimenté dans nos entrées de texte et la seule chose est, je dois m'assurer que

107
00:10:48,910 --> 00:10:56,490
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

108
00:10:56,490 --> 00:10:58,180
c'est le cas, alors je retournerai

109
00:10:58,200 --> 00:10:59,820
null ici et seulement sinon

110
00:10:59,820 --> 00:11:07,380
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

111
00:11:07,380 --> 00:11:12,300
de prix soit supprimée si nous modifions car je ne peux pas la modifier de toute façon.

112
00:11:12,400 --> 00:11:20,910
Alors maintenant, essayons et revenons à l'écran d'administration. Si je clique sur ajouter, oui, je dois rajouter l'importation

113
00:11:21,020 --> 00:11:26,990
de la plate-forme car j'utilise cela dans le bouton d'en-tête pour afficher la coche,

114
00:11:27,040 --> 00:11:29,950
les icônes dépendant de la plate-forme.

115
00:11:30,050 --> 00:11:35,150
Assurons-nous donc d'importer la plate-forme sur l'écran d'édition du produit, mais maintenant, si je clique sur ajouter,

116
00:11:35,150 --> 00:11:40,670
nous voyons les quatre importations, toutes vides au début. Par contre, si je clique sur modifier, ils sont préremplis et

117
00:11:40,670 --> 00:11:43,840
je ne vois pas le prix qui correspond exactement à ce que je veux.

118
00:11:43,880 --> 00:11:48,280
Il est maintenant temps de s'assurer que lorsque nous soumettons cela, nous mettons à

119
00:11:48,290 --> 00:11:52,770
jour notre produit si nous le modifions ou si nous l'ajoutons, nous ajoutons un nouveau produit.

120
00:11:52,820 --> 00:11:56,360
Encore une fois, pour l'instant je n'ajouterai aucune validation, nous le ferons plus tard.

121
00:11:56,360 --> 00:12:00,860
Donc pour l'instant, nous pouvons également soumettre un produit vide, plus tard après le prochain module,

122
00:12:00,860 --> 00:12:02,450
cela ne sera plus possible.