1
00:00:02,270 --> 00:00:07,790
Teraz powiem, że dogłębnie przyjrzymy się, jak pracować z danymi wejściowymi użytkownika i tak

2
00:00:07,790 --> 00:00:13,530
dalej w osobnym module w następnym module kursu, dlatego nie będę teraz głęboko w niego zagłębiał.

3
00:00:13,640 --> 00:00:19,460
Jedyne, co chcę teraz zrobić, to dodać tutaj tekst na ekranie edycji produktu, a następnie

4
00:00:19,460 --> 00:00:25,730
wypisać tutaj kilka tekstowych danych wejściowych, które pozwalają nam pobrać dane użytkownika, a na koniec pozwolić

5
00:00:25,730 --> 00:00:31,010
nam dodać lub edytować produkt bez żadnego walidacja lub coś tam specjalnego.

6
00:00:31,010 --> 00:00:37,900
Dlatego też zaimportuję widok przewijania, ponieważ zacznę od zawijania wszystkiego widokiem przewijania, ponieważ z

7
00:00:37,940 --> 00:00:43,160
pewnością można go oglądać na małym urządzeniu lub w trybie poziomym,

8
00:00:43,160 --> 00:00:52,000
gdzie nie wszystko mieści się na jednym ekranie. Teraz będziemy mieć kilka widoków z różnymi wejściami tekstu, więc tutaj zawsze

9
00:00:52,000 --> 00:00:57,640
będziemy mieć tekst z etykietą, taką jak tytuł produktu, który powinieneś wprowadzić, a poniżej, tekst,

10
00:00:57,640 --> 00:01:03,700
który pozwala aby wprowadzić ten tytuł, a na koniec powtórzę to dla wszystkich różnych rzeczy, które chcesz

11
00:01:03,850 --> 00:01:04,500
dodać.

12
00:01:05,460 --> 00:01:07,170
Teraz

13
00:01:07,170 --> 00:01:14,220
będzie wymagana stylizacja, więc tutaj do wprowadzania tekstu dodam styl

14
00:01:15,000 --> 00:01:20,310
wprowadzania, a na tekście powyżej dodam etykietę stylu

15
00:01:20,440 --> 00:01:28,250
stylów, możesz również nadać temu widokowi ogólny styl formy kontroluj na

16
00:01:28,390 --> 00:01:38,710
przykład, jakkolwiek chcesz go nazwać, a teraz możemy powtórzyć to dla tytułu, dla imageUrl tutaj,

17
00:01:38,800 --> 00:01:47,470
dla ceny, a także dla opisu. Opiszę te rzeczy ogólnie w innym

18
00:01:47,460 --> 00:01:55,000
widoku, więc na końcu wszystkie te kontrolki formularzy, które nadam stylowi stylu.

19
00:01:57,490 --> 00:02:00,370
Teraz nadszedł czas, aby popracować nad

20
00:02:00,400 --> 00:02:07,490
tymi stylami tutaj, więc tam na dole w arkuszu stylów, dla formy ustawię margines 20 we wszystkich kierunkach,

21
00:02:07,490 --> 00:02:13,690
więc jest trochę odstępów wokół tych danych wejściowych. Do moich danych wejściowych tutaj, do etykiety kontrolki

22
00:02:13,690 --> 00:02:22,800
formularza i danych wejściowych, chcę również dodać kilka stylów, więc tutaj będę mieć kontrolę formularza, moją etykietę, a następnie także dane wejściowe, więc samo

23
00:02:22,810 --> 00:02:29,270
wprowadzanie tekstu i kontrolę formularza , Chcę ustawić szerokość 100, aby upewnić się, że jest ona tak

24
00:02:29,270 --> 00:02:33,390
szeroka, jak to możliwe. W przypadku etykiety

25
00:02:33,430 --> 00:02:39,450
ustawię rodzinę czcionek tak, aby otwierała bez pogrubienia, aby mieć tu trochę pogrubionego tekstu,

26
00:02:39,450 --> 00:02:45,090
a następnie pionowy margines 8, aby mieć odstępy na górze i na dole,

27
00:02:45,510 --> 00:02:47,580
a dla samego wejścia, które

28
00:02:47,580 --> 00:02:53,580
jest tym elementem wprowadzania tekstu, chcę mieć dopełnienie poziome dwa, więc bardzo małe dopełnienie,

29
00:02:53,580 --> 00:03:00,800
tak że kiedy wprowadzamy tekst, nie znajdujemy się bezpośrednio na krawędzi wejścia i dopełnienie pionowe o wartości

30
00:03:00,810 --> 00:03:12,900
5, więc małe dopełnienie do góry i do dołu oraz dolna krawędź kolor tego lekko szarego wyglądu z tym kodem szesnastkowym ccc, a następnie szerokość dolnej krawędzi jednego

31
00:03:12,900 --> 00:03:21,630
z nich, i to jest styl, na który teraz pójdę. Teraz, jeśli przyjrzymy się temu, przechodząc do administratora, a następnie na przykład dodając

32
00:03:21,660 --> 00:03:25,340
nowy, tak to wygląda, nie wygląda to tak źle, na

33
00:03:25,380 --> 00:03:29,450
pewno nie skonfigurowane w żaden sposób, ale niektóre na początek i oczywiście

34
00:03:30,000 --> 00:03:33,220
teraz chcę móc to przesłać i zapisać również.

35
00:03:33,420 --> 00:03:34,960
W tym celu

36
00:03:34,990 --> 00:03:44,160
na ekranie edycji produktu chcę mieć przycisk akcji, więc przycisk w nagłówku, stąd może przed stylami kolejność nie ma znaczenia, ale lubię mieć ją

37
00:03:44,220 --> 00:03:50,730
tuż obok komponentu, dodaj opcje nawigacji, w których potrzebuję tej dynamicznej składni, ponieważ będziemy musieli zrobić coś

38
00:03:50,730 --> 00:03:56,910
dynamicznego z wnętrza nagłówka, a następnie zwrócimy ten obiekt config, w którym na przykład możesz ustawić

39
00:03:56,910 --> 00:04:02,670
tytuł nagłówka, który powinien być również dynamiczny, ponieważ tam , Chcę podać dane wyjściowe niezależnie

40
00:04:02,670 --> 00:04:09,090
od tego, czy edytujemy, czy dodajemy, co będzie zależeć od tego, czy mamy parametr identyfikatora produktu, czy

41
00:04:09,090 --> 00:04:17,490
nie, abyśmy mogli już uzyskać dostęp do navData. nawigacja. getParam.

42
00:04:17,490 --> 00:04:23,010
Teraz, gdy spojrzysz na ekran produktu użytkownika, zauważysz, że kiedy

43
00:04:23,370 --> 00:04:33,630
klikamy przycisk edycji, przekazujemy tutaj parametr identyfikatora produktu, aby edytować nawigację produktu, kiedy kliknęliśmy ikonę dodawania w nagłówku, jednak

44
00:04:33,630 --> 00:04:36,150
, nie przekazujemy tego.

45
00:04:36,480 --> 00:04:41,420
Zatem identyfikator produktu, jeśli jest dostępny, wiemy, że jesteśmy w trybie edycji.

46
00:04:41,550 --> 00:04:46,410
Więc tutaj mogę sprawdzić, czy możemy uzyskać dla tego wartość, a jeśli to prawda,

47
00:04:46,410 --> 00:04:48,640
to pokazuję edycję produktu jako tytuł,

48
00:04:48,650 --> 00:04:54,390
w przeciwnym razie pokażę dodanie produktu, ponieważ jest to dla mnie wyraźny wskaźnik, czy edytujemy, czy dodawanie

49
00:04:55,350 --> 00:04:59,050
Tytuł nagłówka to jednak nie wszystko, co powinno

50
00:04:59,220 --> 00:05:01,260
być częścią konfiguracji,

51
00:05:01,260 --> 00:05:07,140
chcę też mieć tę prawą część nagłówka, aby mieć przycisk, który pozwala mi

52
00:05:07,170 --> 00:05:12,140
zapisać moje dane, w tym celu przejdę do ekranu produktów użytkownika

53
00:05:12,330 --> 00:05:19,740
i skopiuję tę konfigurację mam tam z przyciskami nagłówka, skopiuj to na ekran edycji produktu i oczywiście

54
00:05:19,740 --> 00:05:29,850
skopiuj również import przycisku nagłówka i przycisków nagłówka oraz element do edycji ekranu produktu i dodaj to tu i teraz, oczywiście muszę

55
00:05:29,850 --> 00:05:35,280
to trochę poprawić, ponieważ z pewnością przycisk dodawania nie ma tutaj sensu,

56
00:05:35,280 --> 00:05:42,570
zapisz wydaje się być bardziej odpowiednią etykietą, a ikona, której chcę użyć, to md checkmark i

57
00:05:42,600 --> 00:05:49,220
iOS checkmark, który renderuje ładną ikonę zaznaczenia. Oczywiście tutaj również nie chcę nawigować do

58
00:05:49,250 --> 00:05:55,470
edycji produktu, ale zamiast tego chcę przesłać formularz i nad tym popracujemy za chwilę.

59
00:05:55,490 --> 00:06:01,250
Po pierwsze, musimy upewnić się, że możemy zapisać wszystkie dane wejściowe użytkownika

60
00:06:01,250 --> 00:06:11,520
i że my również wypełniamy ten formularz na wypadek edytowania. Aby więc zapisać dane wprowadzone przez użytkownika, możemy użyć haka stanu

61
00:06:11,520 --> 00:06:14,810
użycia z React i po prostu zarządzać

62
00:06:15,000 --> 00:06:19,560
stanem dla każdego z tych wprowadzania tekstu, dzięki czemu będziemy

63
00:06:19,620 --> 00:06:26,920
mieć tutaj cztery stany ze stanem użycia, każdy początkowo zainicjowany na pusty ciąg a następnie mamy

64
00:06:26,920 --> 00:06:36,190
tytuł i zestaw tytułów i powtórzmy, że w zasadzie mamy również imageUrl i set imageUrl, a następnie tutaj, mamy cenę i

65
00:06:36,580 --> 00:06:37,990
cenę zestawu,

66
00:06:38,140 --> 00:06:46,390
a następnie tutaj mamy opis i opis zestawu i jeszcze raz poprawimy to w następnym module, w którym

67
00:06:46,390 --> 00:06:49,340
głębiej zajmiemy się wprowadzaniem danych przez użytkownika.

68
00:06:49,360 --> 00:06:55,210
Na razie powiążę to z moim wprowadzaniem tekstu, tutaj wartość jest związana z tytułem pierwszego, który

69
00:06:55,210 --> 00:07:04,090
jest moim wprowadzeniem tytułu, a przy zmianie tekstu tutaj otrzymuję tekst, który się zmienił i zapiszę go z powrotem w w tym przypadku ustaw

70
00:07:04,350 --> 00:07:11,920
tytuł, aby zaktualizować stan tytułu o nowo wprowadzony tekst tytułu. A teraz jest to wzorzec, który dodajemy

71
00:07:11,920 --> 00:07:15,550
tutaj do wszystkich tych tekstów, tutaj oczywiście,

72
00:07:15,730 --> 00:07:22,270
po raz drugi, mówimy o imageUrl i ustawiam imageUrl, ale poza tym jest

73
00:07:22,270 --> 00:07:25,390
taki sam. Co do ceny,

74
00:07:25,390 --> 00:07:31,700
co nie jest zaskoczeniem, zwracamy cenę i nazywamy cenę ustaloną, ale poza tym jest taka sama.

75
00:07:31,720 --> 00:07:36,550
Należy pamiętać, że cena oczywiście jest tutaj również zarządzana jako

76
00:07:36,550 --> 00:07:46,340
ciąg znaków, ponieważ wszystko, co użytkownik wprowadza, zawsze jest tekstem, a tutaj do wprowadzania tekstu przekażę swój opis i ustawię tutaj opis.

77
00:07:47,980 --> 00:07:57,550
Dzięki temu dane są zarządzane, aby teraz wstępnie zaliczyć, że kiedy mamy przepis, gdy ładujemy produkt i

78
00:07:57,550 --> 00:08:07,590
jesteśmy w trybie edycji, musimy tylko uzyskać identyfikator produktu za pomocą nawigacji rekwizytów, uzyskać parametry, tam , identyfikator

79
00:08:08,010 --> 00:08:17,250
produktu jest parametrem, który możemy naprawić, a jeśli ustawiony jest identyfikator prod, to wiem, że jesteśmy w

80
00:08:17,250 --> 00:08:24,060
trybie edycji, i wtedy oczywiście chcę wstępnie wypełnić moje pola wartościami.

81
00:08:24,190 --> 00:08:31,870
Teraz właściwie oznacza to, że chcę załadować mój produkt na podstawie identyfikatora prod ze stanu Redux.

82
00:08:31,870 --> 00:08:47,340
Więc importujemy selektor użycia z React Redux tu i teraz tutaj, możemy uzyskać nasz edytowany produkt, docierając z selektorem użycia do naszego stanu Redux i teraz tutaj, oczywiście, musimy zagłębić się w nasz kawałek produktu i

83
00:08:47,340 --> 00:08:51,170
zawsze możesz sprawdzić swój reduktor, jeśli nie jesteś pewien,

84
00:08:51,210 --> 00:08:56,640
jak został on skonstruowany ponownie i tam, widzimy w części produktowej naszego reduktora,

85
00:08:56,640 --> 00:09:01,740
w naszym sklepie Redux, powinienem powiedzieć, że w końcu mamy tablicę produktów

86
00:09:01,800 --> 00:09:06,180
użytkownika, więc to mnie interesuje tutaj sięgam do produktów użytkowników

87
00:09:06,270 --> 00:09:07,820
i teraz chcę

88
00:09:07,850 --> 00:09:13,870
znaleźć produkt o tym identyfikatorze produktu. Więc tutaj przyjrzę się każdemu produktowi,

89
00:09:13,870 --> 00:09:19,060
funkcja find robi to za mnie i chcę zwrócić wartość true, jeśli

90
00:09:19,060 --> 00:09:24,330
identyfikator produktu, na który patrzę, jest równy identyfikatorowi produktu pobranemu z moich parametrów.

91
00:09:24,730 --> 00:09:29,710
Teraz oczywiście czasami to nic nie da, jeśli ID prod nie jest ustawione, ponieważ

92
00:09:29,710 --> 00:09:36,370
ten parametr nie jest ustawiony, co zawsze ma miejsce po kliknięciu tego przycisku dodawania, wtedy ten parametr nigdy nie

93
00:09:36,370 --> 00:09:44,620
zostanie ustawiony, ale to jest w porządku. Tak edytowany produkt będzie po prostu niezdefiniowany, co jest całkowicie w porządku. W przeciwnym razie, jeśli edytowany

94
00:09:44,620 --> 00:09:50,470
produkt nie jest niezdefiniowany, jeśli zostanie ustawiony, wiemy, że jesteśmy w trybie

95
00:09:50,470 --> 00:09:58,210
edycji i dlatego możemy wstępnie wypełnić nasze wartości. Dlatego faktycznie zrobię to najpierw, zanim zainicjuję mój stan, ponieważ jest

96
00:09:58,230 --> 00:10:03,120
to coś, co chcę zainicjować w zależności od tego, czy załadowaliśmy produkt, czy nie.

97
00:10:04,320 --> 00:10:09,750
Więc tytuł tutaj, właściwie tam sprawdzę, czy edytowany produkt, jeśli jest ustawiony, jeśli jest ustawiony,

98
00:10:09,750 --> 00:10:15,720
to zainicjuję tytuł, który ma być edytowany. tytuł, w przeciwnym razie będzie

99
00:10:15,720 --> 00:10:21,560
to pusty ciąg i będę miał taką samą logikę dla imageUrl tutaj.

100
00:10:21,600 --> 00:10:28,980
Więc tutaj robię to dla imageUrl, nie dla ceny, ponieważ cena nie powinna być zmienna, ale

101
00:10:29,070 --> 00:10:31,250
zrobię to dla opisu.

102
00:10:32,200 --> 00:10:36,520
Tak więc domyślna wartość tytułu, imageUrl i opisu zależy od

103
00:10:36,520 --> 00:10:43,870
tego, czy mamy edytowany produkt, czy nie. A teraz, skoro ustawiliśmy to na stan, zostanie to

104
00:10:43,870 --> 00:10:48,910
automatycznie wprowadzone do naszych danych wejściowych, a jedyną rzeczą jest to, że muszę upewnić

105
00:10:48,910 --> 00:10:56,490
się, że usunę tutaj cenę wejściową, jeśli jesteśmy w trybie edycji. Więc sprawdzę, czy edytowany produkt jest ustawiony tutaj i jeśli tak

106
00:10:56,490 --> 00:10:58,180
jest, wtedy zwrócę tutaj wartość

107
00:10:58,200 --> 00:10:59,820
null i tylko w

108
00:10:59,820 --> 00:11:07,380
przeciwnym razie, jeśli nie zostanie ustawiony, więc jeśli jestem w trybie dodawania, a nie w trybie edycji, wyrenderuję to cena wejściowa tutaj, tak

109
00:11:07,380 --> 00:11:12,300
że cena wejściowa jest usuwana, jeśli edytujemy, ponieważ i tak nie mogę jej edytować.

110
00:11:12,400 --> 00:11:20,910
A teraz spróbujmy i wróćmy do ekranu administratora. Jeśli kliknę przycisk Dodaj, tak, muszę ponownie dodać

111
00:11:21,020 --> 00:11:26,990
import platformy, ponieważ używam tego w przycisku nagłówka do renderowania znacznika

112
00:11:27,040 --> 00:11:29,950
wyboru, ikony zależą od platformy.

113
00:11:30,050 --> 00:11:35,150
Upewnijmy się więc, że importujemy platformę na ekranie edycji produktu, ale teraz, gdy kliknę Dodaj,

114
00:11:35,150 --> 00:11:40,670
zobaczymy wszystkie cztery importy, wszystkie puste na początku. Z drugiej strony, jeśli kliknę edycję, zostaną one wypełnione

115
00:11:40,670 --> 00:11:43,840
i nie widzę danych wejściowych ceny, które są dokładnie tym, czego chcę.

116
00:11:43,880 --> 00:11:48,280
Teraz nadszedł czas, aby upewnić się, że przesyłając to, albo

117
00:11:48,290 --> 00:11:52,770
aktualizujemy nasz produkt, jeśli edytujemy, albo jeśli dodajemy go, dodajemy nowy produkt.

118
00:11:52,820 --> 00:11:56,360
Jeszcze raz, na razie nie dodam żadnej weryfikacji, zrobimy to później.

119
00:11:56,360 --> 00:12:00,860
Na razie możemy również przesłać pusty produkt, później po kolejnym module nie

120
00:12:00,860 --> 00:12:02,450
będzie to już możliwe.