1
00:00:02,530 --> 00:00:05,110
Jak inaczej możemy to zoptymalizować?

2
00:00:05,110 --> 00:00:11,350
Cóż, możesz zauważyć, że ten kod jsx tutaj może być wielokrotnie powtarzany, każde wejście

3
00:00:11,360 --> 00:00:12,590
wygląda tak.

4
00:00:12,640 --> 00:00:18,130
Mamy widok, mamy etykietę z samym wprowadzaniem tekstu i możemy również chcieć wyświetlać

5
00:00:18,130 --> 00:00:19,140
tekst błędu.

6
00:00:19,270 --> 00:00:22,900
Dlatego sensowne byłoby zlecenie tego na osobny komponent

7
00:00:22,990 --> 00:00:25,370
i właśnie to chcę zrobić.

8
00:00:25,480 --> 00:00:32,230
Pójdę do mojego folderu komponentów i tam w folderze interfejsu użytkownika dodam dane wejściowe. plik js, który będzie zawierał komponent React, więc

9
00:00:32,230 --> 00:00:38,410
importuję oczywiście reaguj od zareaguj, a następnie importuję kilka rzeczy z React Native,

10
00:00:38,410 --> 00:00:45,460
a na końcu są to mój widok, komponent tekstowy, komponent wprowadzania tekstu i arkusz stylów, ponieważ

11
00:00:45,460 --> 00:00:54,210
„ Potrzebuję tego również od React Native, a dzięki temu tutaj możemy utworzyć komponent wejściowy, który pobiera rekwizyty i

12
00:00:54,210 --> 00:01:01,410
musi zwrócić trochę jsx. Będziemy mieli obiekt stylów z Arkuszem stylów. stworzyć i oczywiście

13
00:01:02,780 --> 00:01:08,230
w końcu eksportujemy to jako domyślny tutaj, ten komponent.

14
00:01:08,340 --> 00:01:18,420
Teraz, jeśli wrócimy do ekranu edycji produktu, możemy wyciąć ten tytułowy kod jsx, więc widok otoczenia, tekst, wprowadzanie tekstu i

15
00:01:18,440 --> 00:01:23,890
ta część komunikatu o błędzie, wyciąć go stąd, z ekranu

16
00:01:24,250 --> 00:01:32,700
edycji produktu i przenieść na ekranie wejściowym i użyj go jako wartości zwracanej w tym komponencie wejściowym.

17
00:01:32,740 --> 00:01:37,210
Teraz oczywiście musimy trochę to zmienić, ale to jest nasz ogólny szkielet, którego chcę tam

18
00:01:37,210 --> 00:01:37,720
użyć.

19
00:01:37,960 --> 00:01:42,720
Teraz również z ekranu edycji produktu, wezmę styl,

20
00:01:42,770 --> 00:01:49,270
tam ta etykieta kontrolna formularza i styl wejściowy mogą zostać usunięte i

21
00:01:49,270 --> 00:01:55,440
powinny zostać przeniesione do komponentu wejściowego i tam do arkusza stylów.

22
00:01:55,460 --> 00:02:00,740
Teraz, oczywiście, można tego użyć tylko w tytule i chcę utworzyć komponent wejściowy, który

23
00:02:00,740 --> 00:02:07,580
można wykorzystać do dowolnego wprowadzania, co oznacza na przykład, że etykieta tutaj musi być dynamiczna, więc spodziewam się

24
00:02:07,710 --> 00:02:10,830
weź to na rekwizycie o nazwie label.

25
00:02:13,740 --> 00:02:18,420
Ogólnie rzecz biorąc, chcę również upewnić się, że wprowadzanie tekstu można skonfigurować z

26
00:02:18,420 --> 00:02:25,800
zewnątrz, więc przekażę wszystkie rekwizyty, które dostaję na moim komponencie wejściowym tutaj, do wprowadzania tekstu, dzięki czemu na tym komponencie będziemy

27
00:02:25,800 --> 00:02:31,060
mogli ustawić rzeczy takie jak typ klawiatury, ponieważ nie chcę tutaj tego kodować na sztywno,

28
00:02:31,070 --> 00:02:31,570
zamiast

29
00:02:31,570 --> 00:02:36,720
tego powinno to być opakowanie wielokrotnego użytku wokół komponentu wprowadzania tekstu, który można skonfigurować

30
00:02:36,720 --> 00:02:37,570
z zewnątrz.

31
00:02:37,800 --> 00:02:43,990
Więc te ustawienia tutaj, na przykład, wytnę je stąd, abyśmy mogli je ustawić z zewnątrz, pozbędę się również tych

32
00:02:44,010 --> 00:02:46,530
słuchaczy, ponieważ tak naprawdę ich nie potrzebujemy.

33
00:02:52,130 --> 00:02:57,230
Tekst błędu również powinien być ustawiany z zewnątrz, więc sprawdzę tekst błędu rekwizytów

34
00:02:57,230 --> 00:02:58,640
tutaj i oczywiście możesz

35
00:02:58,640 --> 00:03:02,720
jak zwykle nadać tym rekwizytom dowolne nazwy, oczywiście będziemy musieli

36
00:03:02,720 --> 00:03:07,570
zmienić to, co tutaj przypisujemy jako wartość i tak dalej, to również

37
00:03:07,570 --> 00:03:08,800
się zmieni.

38
00:03:09,350 --> 00:03:11,720
Ale teraz możemy już zacząć używać

39
00:03:11,720 --> 00:03:23,200
tego wejścia tutaj, przejdźmy do ekranu edycji produktu i tam, po prostu przejdę na górę i zaimportuję dane wejściowe z folderu składników oczywiście i tam z folderu interfejsu

40
00:03:23,200 --> 00:03:27,210
użytkownika i tam z danych wejściowych, a następnie mogę zacząć

41
00:03:27,550 --> 00:03:32,770
korzystać z komponentu wejściowego w miejscu, w którym wcześniej miałem tutaj komponent do

42
00:03:32,770 --> 00:03:33,910
wprowadzania tekstu.

43
00:03:34,000 --> 00:03:40,510
Więc dodam tylko dane wejściowe, a teraz na wejściu możemy dodać ustawienie, które wyciąłem, takie jak typ klawiatury i

44
00:03:40,510 --> 00:03:43,000
tak dalej, ponieważ zostanie ono przekazane.

45
00:03:43,180 --> 00:03:50,950
Możemy ustawić naszą etykietę tytułu, na przykład tytuł, a także ewentualny tekst błędu, na przykład Wprowadź prawidłowy tytuł, choć to nie wszystko,

46
00:03:51,550 --> 00:03:55,470
co zrobimy w zakresie sprawdzania poprawności, ale to dopiero początek.

47
00:03:55,510 --> 00:03:57,250
W ten sposób możemy następnie wykorzystać te

48
00:03:59,130 --> 00:04:02,970
dane wejściowe i oczywiście w ten sposób możemy je teraz wykorzystać do zastąpienia innych danych wejściowych.

49
00:04:02,970 --> 00:04:11,400
Na przykład tutaj, imageUrl, tutaj ustawiam to na imageUrl, proszę wprowadzić poprawny imageUrl może, domyślnie typ klawiatury

50
00:04:11,400 --> 00:04:17,910
jest w porządku, automatyczna korekta wielkich liter nie jest wymagana, zwróć typ klucza,

51
00:04:17,910 --> 00:04:23,070
możemy to zostawić, nie robimy cokolwiek z tym możemy dodać trochę

52
00:04:23,070 --> 00:04:29,990
logiki, ale nie robię tego tutaj. Jeśli chodzi o cenę, pozostawię renderowanie warunkowe, ale tam

53
00:04:33,510 --> 00:04:42,300
mogę dodać moje dane wejściowe, ustawić tę wartość na cenę, wprowadź prawidłową cenę, typ klawiatury tutaj nie powinien oczywiście być domyślny, ale pad dziesiętny, nie potrzebuję

54
00:04:42,330 --> 00:04:49,380
automatycznych wielkich liter lub automatyczna korekta, więc pozbądźmy się tego. I do opisu tutaj, dodam również

55
00:04:49,380 --> 00:04:58,740
moje dane wejściowe tutaj, opis, proszę wprowadzić poprawny opis, typ klawiatury może być domyślny, mogę użyć automatycznej

56
00:04:58,980 --> 00:05:05,700
wielkich liter, automatycznej korekty, jednak nie ustawię typu klawisza powrotu, ale

57
00:05:05,700 --> 00:05:14,330
tutaj Chcę ustawić multilinię właśnie tak, co pozwala na edycję wieloliniową i ustawić liczbę wierszy,

58
00:05:14,330 --> 00:05:15,830
powiedzmy trzy.

59
00:05:15,830 --> 00:05:20,630
Jest to jednak używane tylko przez Androida, ale tam ograniczy liczbę linii, które możesz wprowadzić, w

60
00:05:20,630 --> 00:05:25,580
iOS, to nie będzie miało efektu, ale w ten sposób możesz teraz używać tego komponentu wejściowego i

61
00:05:25,580 --> 00:05:27,470
nadal konfigurować go z zewnątrz.

62
00:05:27,470 --> 00:05:30,240
Biorąc to pod uwagę, ponieważ powiedziałem,

63
00:05:30,260 --> 00:05:35,710
że jeszcze nie skończyliśmy, co z wartością i tą zmianą detektora tekstu?

64
00:05:35,840 --> 00:05:42,030
Istnieją różne sposoby obsługi tego wprowadzania tekstu lub wartości tekstowych tutaj.

65
00:05:42,050 --> 00:05:47,960
Nadal możesz po prostu przesłać go do komponentu nadrzędnego i używać tego komponentu wejściowego tylko jako

66
00:05:48,080 --> 00:05:49,020
opakowania wizualnego,

67
00:05:49,310 --> 00:05:55,850
ale przejdę go nieco dalej i chcę zarządzać tą wartością i ważnością pojedynczego wejścia w komponencie wejściowym, tak

68
00:05:56,180 --> 00:05:58,460
aby Następnie zgłaszam się tylko do

69
00:05:58,460 --> 00:06:05,280
mojego komponentu nadrzędnego, więc na końcu ekranu edycji produktu, jaka jest bieżąca wartość i czy jest poprawna, czy nie,

70
00:06:05,280 --> 00:06:07,900
aby sprawdzanie poprawności nie musiało się odbywać

71
00:06:07,940 --> 00:06:11,980
w komponencie nadrzędnym, ale znowu, to jest całkowicie w górę do

72
00:06:12,170 --> 00:06:17,480
ciebie, czy chcesz to zrobić, czy nie. Tutaj dodam nową stałą do

73
00:06:17,480 --> 00:06:25,520
komponentu wejściowego, moduł obsługi zmiany tekstu, w którym dostaję ten tekst, ponieważ to teraz wiążę lub

74
00:06:25,550 --> 00:06:31,400
co jest już związane i ogólnie zachowam to w ten sposób, chociaż

75
00:06:31,400 --> 00:06:33,380
tutaj nie potrzebujemy identyfikatora

76
00:06:33,620 --> 00:06:39,560
nie trzeba już wiązać, ponieważ jest to wewnątrz jednego wejścia, nie potrzebujemy

77
00:06:39,560 --> 00:06:40,810
tam identyfikatora.

78
00:06:40,880 --> 00:06:44,150
To będzie teraz wyzwalane przy każdym naciśnięciu klawisza, a

79
00:06:44,150 --> 00:06:56,140
więc teraz tutaj chcę sprawdzić, czy jest to prawidłowe, czy nie, a także zarządzać moją wartością tego wejścia. Teraz możemy ponownie użyć reduktora lub pojedynczych stanów zarządzanych za pomocą stanu

80
00:06:56,140 --> 00:07:02,270
użytkowania lub utworzonych za pomocą stanu użytkowania, ale pójdę po reduktor i

81
00:07:02,300 --> 00:07:03,920
tutaj mam mój

82
00:07:04,090 --> 00:07:12,300
reduktor wejściowy, nazwa zależy od ciebie, dostaje stan, dostaje stan akcja i zwraca nowy stan na

83
00:07:12,300 --> 00:07:13,110
końcu.

84
00:07:13,440 --> 00:07:20,390
Następnie tutaj, na wejściu, mogę wywołać use reduktor i przesłać dalej lub ustawić to na reduktor wejściowy, a moim początkowym

85
00:07:20,550 --> 00:07:28,200
stanem dla tego wejścia będzie prosty obiekt JavaScript z trzema wartościami. Wartość, którą obecnie posiadasz, która początkowo może być pusta,

86
00:07:28,260 --> 00:07:34,470
ale tak naprawdę chcę pozwolić sobie na ustawienie wartości początkowej z zewnątrz, ponieważ będziemy

87
00:07:34,470 --> 00:07:37,230
jej potrzebować, na przykład podczas edycji

88
00:07:37,260 --> 00:07:41,570
produktów, więc sprawdzam, czy wartość początkowa rekwizytów jest ustawiona ,

89
00:07:41,610 --> 00:07:43,700
znowu jest to oczywiście nazwa,

90
00:07:43,700 --> 00:07:46,980
którą możesz wybrać, jak chcesz, a jeśli

91
00:07:46,980 --> 00:07:49,220
tak jest, ustawię ją na

92
00:07:49,230 --> 00:07:50,040
wartość

93
00:07:50,130 --> 00:07:53,460
początkową rekwizyty, w przeciwnym razie ustawię, aby ustawić

94
00:07:53,460 --> 00:08:03,600
ją na pusty ciąg, to też zarządzę czy jest to poprawne czy nie, i tam ponownie mogę sprawdzić, czy rekwizyty początkowo ważne, powiedzmy,

95
00:08:03,630 --> 00:08:05,160
że jest ustawiony.

96
00:08:05,160 --> 00:08:08,780
W takim przypadku automatycznie przyjmuję tę wartość, która powinna być

97
00:08:08,790 --> 00:08:11,750
prawdziwa lub fałszywa, jeśli tak nie

98
00:08:13,420 --> 00:08:16,440
jest, to automatycznie zostanie potraktowana jako fałszywa, a

99
00:08:16,450 --> 00:08:23,170
także zarządzę, czy została jeszcze dotknięta, czy nie, więc czy użytkownik faktycznie napisał tutaj i może to

100
00:08:23,260 --> 00:08:26,850
być przydatne, aby pomóc nam w zapewnieniu lepszej wygody

101
00:08:27,100 --> 00:08:33,760
użytkownika, jeśli chodzi o to, kiedy wyświetlamy błędy sprawdzania poprawności, a tutaj na początku ustawię wartość false.

102
00:08:33,780 --> 00:08:40,260
Teraz oczywiście zwróci nam migawkę stanu wejściowego i funkcję wysyłania, którą tutaj mogę

103
00:08:40,260 --> 00:08:46,920
również nazwać wysyłką, ponieważ nie będziemy mieć konfliktu nazw, a w module obsługi

104
00:08:46,920 --> 00:08:54,420
zmiany tekstu oczywiście wyślę akcję, akcję, którą dlatego utworzymy tutaj z identyfikatorem akcji, na przykład

105
00:08:54,420 --> 00:09:00,040
zmianę danych wejściowych, które należy wysłać tutaj, wpisz zmianę danych wejściowych,

106
00:09:00,040 --> 00:09:08,930
a następnie tutaj w reduktorze możemy dodać instrukcję switch, aby pomieszać rzeczy, sprawdzić typ akcji i zmianę danych

107
00:09:08,960 --> 00:09:16,150
wejściowych sprawy , chcemy coś zrobić. W domyślnym przypadku po prostu przywrócę

108
00:09:16,190 --> 00:09:22,400
swój stan, więc nie zrobię nic, ale tutaj oczywiście chcę zrobić coś innego.

109
00:09:22,630 --> 00:09:27,730
Teraz tutaj, w procedurze zmiany tekstu, oczywiście wysyłam zmianę danych wejściowych i chcę przekazać wartość,

110
00:09:27,760 --> 00:09:29,320
którą zapamiętałem w kluczu

111
00:09:29,410 --> 00:09:35,320
wartości, ale teraz tutaj chcę również dokonać weryfikacji specyficznej dla danych wejściowych i przekazać informację, czy dane

112
00:09:35,350 --> 00:09:39,550
wejściowe są prawidłowe, czy nie . W tym celu w

113
00:09:39,570 --> 00:09:45,040
załączeniu znajduje się konfiguracja sprawdzania poprawności lub kod weryfikacyjny, przez który teraz przeprowadzę.

114
00:09:45,210 --> 00:09:50,760
Tutaj mam stałą, która konfiguruje wyrażenie regularne wiadomości e-mail, więc wyrażenie regularne, które pozwala nam

115
00:09:50,760 --> 00:09:52,710
zweryfikować adresy e-mail, nie

116
00:09:52,710 --> 00:09:58,290
mamy jeszcze adresu e-mail, ale później, gdy dodamy uwierzytelnienie, będziemy to mieć, a potem będę

117
00:09:58,290 --> 00:10:00,670
mógł aby użyć tego komponentu wejściowego, dlatego

118
00:10:00,780 --> 00:10:04,580
ten komponent powinien być przygotowany do sprawdzania poprawności wiadomości e-mail.

119
00:10:04,740 --> 00:10:10,140
Mam tutaj poprawną zmienną pomocniczą, ponieważ mamy tutaj kilka sprawdzeń.

120
00:10:10,140 --> 00:10:16,610
Teraz chcę się upewnić, że możemy ustawić kryteria, które chcemy zastosować z zewnątrz za pomocą rekwizytów, więc na przykład sprawdzam, czy wymagane

121
00:10:16,620 --> 00:10:21,030
rekwizyty są ustawione, jeśli jest to ustawione na true, więc jeśli w ogóle jest ustawione

122
00:10:21,030 --> 00:10:26,610
i czy w takim przypadku ta kontrola zostanie wykonana. Jeśli wymagany rekwizyt nie jest ustawiony, to sprawdzenie

123
00:10:26,610 --> 00:10:31,620
nie zostanie przeprowadzone, a zatem ta weryfikacja nie zostanie wykonana i tak jest w

124
00:10:31,620 --> 00:10:33,870
przypadku wszystkich moich różnych weryfikacji tutaj.

125
00:10:34,080 --> 00:10:40,180
Możemy więc ustawić wymagany rekwizyt, aby sprawdzić, czy nie jest pusty, jeśli jest pusty, ustawiliśmy wartość false.

126
00:10:40,440 --> 00:10:46,140
Możemy ustawić prop e-maila na elemencie wejściowym, aby zweryfikować, czy jest prawidłowym adresem e-mail, a jeśli

127
00:10:46,320 --> 00:10:48,330
nie, ustawimy go na false.

128
00:10:48,450 --> 00:10:55,260
Możemy sprawdzić liczbę za zbyt małą lub zbyt dużą lub ciąg znaków za zbyt krótki za

129
00:10:55,260 --> 00:10:56,070
pomocą

130
00:10:56,070 --> 00:11:01,950
walidatora minimalnej długości i oczywiście możesz dodać tutaj więcej logiki, być może również z

131
00:11:01,950 --> 00:11:09,800
pakietem takim jak ValidateJs, o którym już wspomniałem wcześniej. Teraz z tym będę mieć poprawność na końcu, co jest prawdą domyślnie,

132
00:11:09,940 --> 00:11:16,520
ale fałszem, gdy tylko jedna walidacja zakończy się niepowodzeniem, a zatem teraz możemy dodać, że jest ważna również dla tej wysłanej

133
00:11:16,520 --> 00:11:17,060
akcji.