1
00:00:02,270 --> 00:00:07,790
Jetzt werde ich sagen, dass wir uns im nächsten Kursmodul in einem separaten Modul eingehend

2
00:00:07,790 --> 00:00:13,530
mit der Arbeit mit Benutzereingaben usw. befassen werden, daher werde ich jetzt nicht weiter darauf eingehen.

3
00:00:13,640 --> 00:00:19,460
Das einzige, was ich jetzt tun möchte, ist, hier eine Texteingabe zum Bildschirm zum Bearbeiten

4
00:00:19,460 --> 00:00:25,730
von Produkten hinzuzufügen und dann hier einige Texteingaben auszugeben, mit denen wir Benutzereingaben abrufen und am

5
00:00:25,730 --> 00:00:31,010
Ende Produkte ohne hinzufügen oder bearbeiten können Validierung oder irgendetwas Besonderes drin.

6
00:00:31,010 --> 00:00:37,900
Daher importiere ich auch eine Bildlaufansicht, da ich zunächst alles mit einer Bildlaufansicht umschließe, da

7
00:00:37,940 --> 00:00:43,160
Sie dies sicherlich auf einem kleinen Gerät oder im Querformat anzeigen

8
00:00:43,160 --> 00:00:52,000
können, wo nicht alles auf einen Bildschirm passt. Jetzt haben wir ein paar Ansichten mit den verschiedenen Texteingaben, also haben wir hier

9
00:00:52,000 --> 00:00:57,640
immer einen Text mit einer Bezeichnung, wie dem Titel des Produkts, das Sie eingeben sollten, und darunter eine Texteingabe,

10
00:00:57,640 --> 00:01:03,700
die dies ermöglicht Wenn Sie diesen Titel eingeben, werde ich dies am Ende für all die verschiedenen Dinge wiederholen, die Sie

11
00:01:03,850 --> 00:01:04,500
hinzufügen möchten.

12
00:01:05,460 --> 00:01:07,170
Jetzt ist

13
00:01:07,170 --> 00:01:14,220
ein gewisses Styling erforderlich. Für die Texteingabe füge ich hier einen Eingabestil hinzu.

14
00:01:15,000 --> 00:01:20,310
Über dem Text darüber füge ich eine Stilstilbezeichnung hinzu.

15
00:01:20,440 --> 00:01:28,250
Sie können dieser Ansicht auch einen allgemeinen Formstil geben Steuern Sie zum Beispiel, was auch

16
00:01:28,390 --> 00:01:38,710
immer Sie es benennen möchten, und jetzt können wir das für den Titel, für die imageUrl hier, für den

17
00:01:38,800 --> 00:01:47,470
Preis und nicht zuletzt für die Beschreibung wiederholen. Ich werde diese Dinge auch insgesamt in eine andere

18
00:01:47,460 --> 00:01:55,000
Ansicht einbinden, also all diese Formularsteuerelemente am Ende, die ich einem Stil von Stilen geben werde.

19
00:01:57,490 --> 00:02:00,370
Jetzt ist es an der Zeit, hier an

20
00:02:00,400 --> 00:02:07,490
diesen Stilen zu arbeiten. Dort unten im Stylesheet werde ich für das Formular einen Rand von 20 in alle Richtungen festlegen,

21
00:02:07,490 --> 00:02:13,690
sodass um diese Eingaben herum ein gewisser Abstand besteht. Für meine Eingaben hier, für die Beschriftung und

22
00:02:13,690 --> 00:02:22,800
Eingabe des Formularsteuerelements möchte ich auch einige Stile hinzufügen, daher habe ich hier das Formularsteuerelement, meine Beschriftung und dann auch die Eingabe selbst, also die

23
00:02:22,810 --> 00:02:29,270
Texteingabe selbst und für das Formularsteuerelement Ich möchte eine Breite von 100 einstellen, um sicherzustellen, dass diese

24
00:02:29,270 --> 00:02:33,390
so breit wie möglich ist. Für die Beschriftung setze

25
00:02:33,430 --> 00:02:39,450
ich die Schriftfamilie so, dass sie ohne Fettdruck geöffnet wird, um hier fett gedruckten Text zu erhalten,

26
00:02:39,450 --> 00:02:45,090
und dann einen vertikalen Rand von 8, um oben und unten einen gewissen Abstand zu

27
00:02:45,510 --> 00:02:47,580
haben, und für die Eingabe selbst,

28
00:02:47,580 --> 00:02:53,580
bei der es sich um dieses Texteingabeelement handelt, möchte ich Um einen horizontalen Abstand von zwei zu

29
00:02:53,580 --> 00:03:00,800
haben, also einen sehr kleinen Abstand, damit wir uns bei der Eingabe von Text nicht direkt am Rand der Eingabe

30
00:03:00,810 --> 00:03:12,900
befinden, und einen vertikalen Abstand von 5, also einen kleinen Abstand oben und unten und einen Rand unten Farbe dieses leicht grauen Aussehens mit diesem Hex-Code von ccc und dann einer Randunterbreite von

31
00:03:12,900 --> 00:03:21,630
eins und das ist der Stil, mit dem ich jetzt gehen werde. Wenn wir uns das ansehen, indem wir zum Administrator gehen und dann zum Beispiel ein

32
00:03:21,660 --> 00:03:25,340
neues hinzufügen, sieht es so aus, es sieht nicht schlecht aus, sicherlich

33
00:03:25,380 --> 00:03:29,450
nicht in irgendeiner Weise konfiguriert, aber einige, mit denen man anfangen kann und

34
00:03:30,000 --> 00:03:33,220
natürlich Jetzt möchte ich dies einreichen und auch speichern können.

35
00:03:33,420 --> 00:03:34,960
Dafür möchte ich auf

36
00:03:34,990 --> 00:03:44,160
dem Bildschirm zum Bearbeiten des Produkts eine Aktionsschaltfläche haben, also eine Schaltfläche in der Kopfzeile. Daher spielt hier vor den Stilen möglicherweise die Reihenfolge keine Rolle, aber

37
00:03:44,220 --> 00:03:50,730
ich möchte sie direkt neben der Komponente haben Fügen Sie die Navigationsoptionen hinzu, bei denen ich diese dynamische Syntax

38
00:03:50,730 --> 00:03:56,910
benötige, da wir etwas Dynamisches aus dem Header heraus ausführen müssen. Dann geben wir hier das Konfigurationsobjekt zurück,

39
00:03:56,910 --> 00:04:02,670
bei dem Sie zum einen den Headertitel festlegen können und der auch dynamisch sein sollte, weil

40
00:04:02,670 --> 00:04:09,090
dort Ich möchte ausgeben, ob wir bearbeiten oder hinzufügen. Dies hängt davon ab, ob wir einen Produkt-ID-Parameter haben oder

41
00:04:09,090 --> 00:04:17,490
nicht, damit wir bereits auf navData zugreifen können. Navigation. getParam.

42
00:04:17,490 --> 00:04:23,010
Wenn Sie sich jetzt den Benutzerproduktbildschirm ansehen, werden Sie feststellen, dass wir beim Klicken

43
00:04:23,370 --> 00:04:33,630
auf die Schaltfläche Bearbeiten den Produkt-ID-Parameter hier übergeben, um die Produktnavigation zu bearbeiten. Wenn wir jedoch auf das Symbol Hinzufügen in der Kopfzeile geklickt haben

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

45
00:04:34,200 --> 00:04:36,150
geben wir nicht weiter.

46
00:04:36,480 --> 00:04:41,420
Wenn der Produkt-ID-Parameter verfügbar ist, wissen wir, dass wir uns im Bearbeitungsmodus befinden.

47
00:04:41,550 --> 00:04:46,410
Hier kann ich also überprüfen, ob wir einen Wert dafür erhalten können, und wenn dies wahr ist, dann

48
00:04:46,410 --> 00:04:48,640
zeige ich das Bearbeitungsprodukt als Titel an,

49
00:04:48,650 --> 00:04:54,390
andernfalls zeige ich das Hinzufügen eines Produkts an, da dies für mich ein klarer Indikator ist, ob wir bearbeiten oder Hinzufügen.

50
00:04:55,350 --> 00:04:59,050
Der Header-Titel ist jedoch nicht alles, was Teil der

51
00:04:59,220 --> 00:05:01,260
Konfiguration sein sollte. Ich

52
00:05:01,260 --> 00:05:07,140
möchte auch, dass dieser Header-rechte Teil eine Schaltfläche enthält, mit der ich meine Daten

53
00:05:07,170 --> 00:05:12,140
speichern kann. Dazu gehe ich zum Bildschirm für Benutzerprodukte und kopiere ihn

54
00:05:12,330 --> 00:05:19,740
Dieses Setup habe ich dort mit den Header-Buttons, kopiere das in den Editier-Produktbildschirm und kopiere daher natürlich auch

55
00:05:19,740 --> 00:05:29,850
die Importe von Header-Button und Header-Buttons und Item-Over, um den Produktbildschirm zu bearbeiten und füge dies hier und jetzt natürlich hinzu Ich muss dies

56
00:05:29,850 --> 00:05:35,280
ein wenig optimieren, da hier sicherlich eine Schaltfläche zum Hinzufügen keinen Sinn ergibt.

57
00:05:35,280 --> 00:05:42,570
Speichern scheint eine passendere Bezeichnung zu sein, und das Symbol, das ich verwenden möchte, ist md Häkchen und

58
00:05:42,600 --> 00:05:49,220
iOS Häkchen, das ein schönes Häkchensymbol darstellt. Natürlich möchte ich hier auch nicht navigieren, um

59
00:05:49,250 --> 00:05:55,470
das Produkt zu bearbeiten, sondern ich möchte mein Formular einreichen und daran werden wir gleich arbeiten.

60
00:05:55,490 --> 00:06:01,250
Zunächst müssen wir sicherstellen, dass wir alle Benutzereingaben speichern können und dass

61
00:06:01,250 --> 00:06:11,520
wir dieses Formular auch vorab ausfüllen, falls wir es bearbeiten. Um die Benutzereingaben zu speichern, können wir den Use-State-Hook von React verwenden

62
00:06:11,520 --> 00:06:14,810
und einfach den Status für jede dieser Texteingaben

63
00:06:15,000 --> 00:06:19,560
verwalten. Daher haben wir hier am Ende vier Status mit dem

64
00:06:19,620 --> 00:06:26,920
Use-Status, die jeweils zunächst mit einer leeren Zeichenfolge initialisiert wurden und dann haben wir den Titel und setzen

65
00:06:26,920 --> 00:06:36,190
den Titel und wiederholen das im Grunde, um auch wie imageUrl und set imageUrl zu haben und dann hier den Preis und

66
00:06:36,580 --> 00:06:37,990
den eingestellten

67
00:06:38,140 --> 00:06:46,390
Preis und dann hier auch die Beschreibung und die eingestellte Beschreibung und wieder werden wir dies verfeinern Im nächsten Modul

68
00:06:46,390 --> 00:06:49,340
werden wir uns eingehender mit Benutzereingaben befassen.

69
00:06:49,360 --> 00:06:55,210
Im Moment binde ich dies nur an meine Texteingabe. Der Wert hier ist an den Titel für diese erste

70
00:06:55,210 --> 00:07:04,090
Eingabe gebunden, die meine Titeleingabe ist. Wenn Sie hier den Text ändern, wird mein Text hier geändert und ich speichere ihn wieder unter Stellen Sie hier in diesem Fall den

71
00:07:04,350 --> 00:07:11,920
Titel ein, damit ich meinen Titelstatus mit dem neu eingegebenen Titeltext aktualisiere. Und jetzt ist es dieses Muster, das wir

72
00:07:11,920 --> 00:07:15,550
hier zu all diesen Texteingaben hinzufügen. Hier

73
00:07:15,730 --> 00:07:22,270
sprechen wir natürlich für das zweite über imageUrl und setzen imageUrl, aber ansonsten ist

74
00:07:22,270 --> 00:07:25,390
es dasselbe. Für den Preis ist

75
00:07:25,390 --> 00:07:31,700
es nicht überraschend, dass wir den Preis zurückgeben und den festgelegten Preis nennen, aber ansonsten ist es der gleiche.

76
00:07:31,720 --> 00:07:36,550
Bitte beachten Sie, dass der Preis daher hier natürlich auch als Zeichenfolge

77
00:07:36,550 --> 00:07:45,880
verwaltet wird, da alles, was der Benutzer eingibt, immer Text ist. Hier für die Texteingabe werde ich meine Beschreibung übergeben und meine Beschreibung hier

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

79
00:07:47,980 --> 00:07:57,550
Damit werden die Daten verwaltet, um vorab auszufüllen, dass wir, wenn wir ein Rezept haben, wenn wir ein Produkt laden

80
00:07:57,550 --> 00:08:07,590
und uns im Bearbeitungsmodus befinden, nur unsere Produkt-ID mit Hilfe der Requisitennavigation abrufen müssen Die Produkt-ID ist ein Parameter, den

81
00:08:08,010 --> 00:08:17,250
wir beim Abrufen korrigieren können. Wenn die Produkt-ID festgelegt ist, weiß ich, dass wir uns im Bearbeitungsmodus befinden,

82
00:08:17,250 --> 00:08:24,060
und dann möchte ich natürlich meine Felder hier mit den Werten vorab ausfüllen.

83
00:08:24,190 --> 00:08:31,870
Das bedeutet, dass ich mein Produkt basierend auf der Produkt-ID aus meinem Redux-Status laden möchte.

84
00:08:31,870 --> 00:08:47,340
Also importieren wir hier und jetzt den Use Selector von React Redux. Wir können unser bearbeitetes Produkt erhalten, indem wir mit dem Use Selector auf unseren Redux-Status zugreifen. Jetzt müssen wir natürlich in unser Produkt-Slice

85
00:08:47,340 --> 00:08:51,170
eintauchen und Sie können jederzeit Ihren überprüfen Reduzierer

86
00:08:51,210 --> 00:08:56,640
Wenn Sie sich nicht sicher sind, wie es wieder aufgebaut wurde, sehen

87
00:08:56,640 --> 00:09:01,740
wir im Produktteil unseres Reduzierers, unseres Redux-Shops, dass wir am Ende dieses

88
00:09:01,800 --> 00:09:06,180
Benutzerprodukt-Array haben. Das interessiert mich also Hier erreiche ich Benutzerprodukte

89
00:09:06,270 --> 00:09:07,820
und möchte jetzt

90
00:09:07,850 --> 00:09:13,870
das Produkt mit dieser Produkt-ID finden. Hier werde ich mir jedes Produkt ansehen.

91
00:09:13,870 --> 00:09:19,060
Die Suchfunktion erledigt dies für mich und ich möchte true zurückgeben, wenn die ID

92
00:09:19,060 --> 00:09:24,330
des Produkts, das ich betrachte, der Produkt-ID entspricht, die ich aus meinen Parametern abgerufen habe.

93
00:09:24,730 --> 00:09:29,710
Jetzt ergibt dies natürlich manchmal nichts, wenn die Produkt-ID nicht festgelegt ist, da dieser Parameter

94
00:09:29,710 --> 00:09:36,370
nicht festgelegt ist, was immer der Fall ist, wenn wir auf diese Schaltfläche zum Hinzufügen geklickt haben. Dann wird dieser

95
00:09:36,370 --> 00:09:44,620
Parameter nie festgelegt, aber das ist in Ordnung. Das bearbeitete Produkt ist dann einfach undefiniert, was völlig in Ordnung ist. Andernfalls wissen wir, dass wir

96
00:09:44,620 --> 00:09:50,470
uns im Bearbeitungsmodus befinden, wenn das bearbeitete Produkt nicht undefiniert ist. Wenn es

97
00:09:50,470 --> 00:09:58,210
daher festgelegt ist, können wir unsere Werte vorab ausfüllen. Daher werde ich dies zuerst tun, bevor ich meinen Status initialisiere, da

98
00:09:58,230 --> 00:10:03,120
dies etwas ist, das ich initialisieren möchte, je nachdem, ob wir ein Produkt geladen haben oder nicht.

99
00:10:04,320 --> 00:10:09,750
Also den Titel hier, eigentlich dort werde ich prüfen, ob das bearbeitete Produkt gesetzt ist, wenn das gesetzt ist, wenn es

100
00:10:09,750 --> 00:10:15,720
gesetzt ist, dann werde ich den zu bearbeitenden Titel initialisierenProdukt. Titel, sonst ist es eine

101
00:10:15,720 --> 00:10:21,560
leere Zeichenfolge und ich habe hier die gleiche Logik für die imageUrl.

102
00:10:21,600 --> 00:10:28,980
Also hier mache ich das für imageUrl, nicht für den Preis, weil der Preis nicht änderbar sein sollte, aber ich werde

103
00:10:29,070 --> 00:10:31,250
es für die Beschreibung tun.

104
00:10:32,200 --> 00:10:36,520
Der Standardwert für Titel, imageUrl und Beschreibung hängt also davon ab,

105
00:10:36,520 --> 00:10:43,870
ob wir ein bearbeitetes Produkt haben oder nicht. Und jetzt, da wir dies auf den Status setzen, wird

106
00:10:43,870 --> 00:10:48,910
dies automatisch in unsere Texteingaben eingespeist und das einzige ist, dass ich sicherstellen muss, dass

107
00:10:48,910 --> 00:10:56,490
ich die Preiseingabe hier entferne, wenn wir uns im Bearbeitungsmodus befinden. Ich werde also prüfen, ob das bearbeitete Produkt hier eingestellt ist. Wenn

108
00:10:56,490 --> 00:10:58,180
dies der Fall ist, gebe ich

109
00:10:58,200 --> 00:10:59,820
hier null zurück und

110
00:10:59,820 --> 00:11:07,380
nur dann, wenn es nicht festgelegt ist. Wenn ich mich also im Add-Modus und nicht im Bearbeitungsmodus befinde, werde ich das rendern Preiseingabe hier,

111
00:11:07,380 --> 00:11:12,300
so dass die Preiseingabe entfernt wird, wenn wir bearbeiten, weil ich sie sowieso nicht bearbeiten kann.

112
00:11:12,400 --> 00:11:20,910
Probieren wir es jetzt aus und kehren wir zum Admin-Bildschirm zurück. Wenn ich auf Hinzufügen klicke, muss ich den Plattformimport

113
00:11:21,020 --> 00:11:26,990
erneut hinzufügen, da ich diesen in der Kopfzeile zum Rendern des Häkchens verwende. Die

114
00:11:27,040 --> 00:11:29,950
Symbole hängen von der Plattform ab.

115
00:11:30,050 --> 00:11:35,150
Stellen wir also sicher, dass wir die Plattform auf dem Bildschirm zum Bearbeiten von Produkten importieren. Wenn ich jetzt auf Hinzufügen klicke,

116
00:11:35,150 --> 00:11:40,670
werden alle vier Importe angezeigt, die zu Beginn alle leer sind. Wenn ich andererseits auf Bearbeiten klicke, werden sie vorab ausgefüllt

117
00:11:40,670 --> 00:11:43,840
und ich sehe nicht die Preiseingabe, die genau das ist, was ich will.

118
00:11:43,880 --> 00:11:48,280
Jetzt ist es an der Zeit sicherzustellen, dass wir bei der Übermittlung entweder unser

119
00:11:48,290 --> 00:11:52,770
Produkt aktualisieren, wenn wir es bearbeiten, oder wenn wir es hinzufügen, ein neues Produkt hinzufügen.

120
00:11:52,820 --> 00:11:56,360
Jetzt noch einmal, für den Moment werde ich keine Validierung hinzufügen, wir werden das später tun.

121
00:11:56,360 --> 00:12:00,860
So können wir vorerst auch ein leeres Produkt einreichen, später nach dem nächsten Modul wird

122
00:12:00,860 --> 00:12:02,450
dies nicht mehr möglich sein.