1
00:00:02,390 --> 00:00:07,550
Teraz, gdy ta akcja jest wysyłana, możemy przejść do reduktora i napisać tutaj kod przy zmianie danych wejściowych, a

2
00:00:08,170 --> 00:00:09,440
to bardzo prosty kod.

3
00:00:09,440 --> 00:00:18,650
Zwracamy nowy stan, w którym kopiuję mój stary stan i chcę zaktualizować wartość za pomocą akcji. wartość, ponieważ wartość jest jedną właściwością, którą mam w

4
00:00:19,400 --> 00:00:25,650
tej akcji, drugą jest isValid, a to druga rzecz, którą chcę również aktualizować

5
00:00:25,650 --> 00:00:30,710
przy każdym naciśnięciu klawisza, isValid dla tego wejścia, nie dla całego

6
00:00:30,710 --> 00:00:38,420
formularza, ale dla tego wejścia zarządzanego wewnętrznie. Nie będę aktualizować dotkniętego tutaj, zamiast tego dotkniętego należy zaktualizować, gdy

7
00:00:38,930 --> 00:00:43,490
faktycznie stracimy fokus, ponieważ oznacza to, że użytkownik jest w tej chwili wprowadzany do

8
00:00:43,490 --> 00:00:52,550
treści, więc teraz chcę oznaczyć to jako dotknięte i prawdopodobnie pokażę błędy sprawdzania poprawności. Więc tutaj, funkcja obsługi utraconego fokusa jest

9
00:00:52,580 --> 00:00:56,690
funkcją, którą dodaję i tam wyślę

10
00:00:59,970 --> 00:01:01,890
akcję. W tym

11
00:01:01,890 --> 00:01:04,470
celu utworzę tutaj identyfikator akcji, rozmycie

12
00:01:04,710 --> 00:01:16,170
wejściowe, takie jak to, rozmycie wejściowe w ten sposób, a teraz możemy wywołać rozmycie wejściowe tutaj, nie musimy dołączać żadnych danych, a teraz w naszym reduktorze, możemy

13
00:01:16,170 --> 00:01:24,060
użyć że w innym przypadku rozmycie danych wejściowych i jeśli tak jest, zwracam nowy stan, w którym kopiuję stary

14
00:01:24,060 --> 00:01:29,280
stan, ponieważ chcę zachować wartość i jest ważny i nie zmieniam tego,

15
00:01:29,280 --> 00:01:36,620
ale chcę ustawić zmieniony na prawda, więc jak najszybciej kiedy rozmazujemy wejście, jest ono traktowane jako dotknięte.

16
00:01:36,750 --> 00:01:44,110
Teraz musimy tylko podłączyć tę funkcję, więc ustawię tutaj nasłuchiwanie onBlur i wskażę moduł obsługi utraconego fokusa, aby uruchomił

17
00:01:44,110 --> 00:01:46,870
się, gdy dane wejściowe zostaną rozmyte.

18
00:01:49,850 --> 00:01:57,100
Teraz to wszystko jest miłe i pozwoli to zarządzać stanem wewnątrz tego wejścia,

19
00:01:57,190 --> 00:02:03,370
oczywiście nadal muszę przekazywać wartość i informacje, czy dane wejściowe są

20
00:02:03,370 --> 00:02:14,700
prawidłowe, czy nie, mojemu rodzicowi, więc na ekranie edycji produktu. Stąd możemy dodać tutaj efekt użycia jako import w składniku wejściowym i

21
00:02:14,700 --> 00:02:15,310
może

22
00:02:18,430 --> 00:02:28,070
dodać go tutaj, a także w funkcji efektu użycia, chcę wywołać funkcję, którą spodziewam się uzyskać za pomocą rekwizytów, może przy

23
00:02:28,130 --> 00:02:40,980
zmianie danych wejściowych, nazwa należy do ciebie i po prostu wykonam to i przekażę moją wartość stanu wejściowego, a mój stan wejściowy jest prawidłową informacją, dzięki czemu

24
00:02:40,980 --> 00:02:48,540
w komponencie nadrzędnym możemy dodać tutaj funkcję, która nasłuchuje na końcu, która jest wyzwalana, który otrzymuje

25
00:02:48,540 --> 00:02:53,790
te dwa argumenty, a następnie w elemencie nadrzędnym, więc w komponencie

26
00:02:53,790 --> 00:03:00,310
ekranu możemy tam zaktualizować nasz stan. Teraz ważne jest, kiedy ten efekt powinien

27
00:03:00,310 --> 00:03:07,420
działać i nie powinien działać po każdym naciśnięciu klawisza? Zamiast tego powinno się to uruchamiać za

28
00:03:07,420 --> 00:03:17,780
każdym razem, gdy nasza wartość stanu wejściowego lub oczywiście są prawidłowe zmiany, ponieważ od tego zależymy lub, mówiąc ściślej, możemy nawet wysłać tę

29
00:03:17,780 --> 00:03:25,910
informację tylko wtedy, gdy dotknięty stan wejściowy jest prawdziwy, ponieważ w przeciwnym razie komponent nadrzędny może nie dbać.

30
00:03:26,100 --> 00:03:31,680
Więc teraz naszą zależnością jest cały stan wejściowy, ponieważ używamy wszystkich wartości, ale nadal będziemy uruchamiać

31
00:03:31,680 --> 00:03:36,600
tę funkcję na komponencie nadrzędnym tylko wtedy, gdy dotknięcie jest prawdziwe, więc ten

32
00:03:36,600 --> 00:03:42,240
efekt będzie działał częściej, ale przez większość czasu nic nie zrobi tak długo, jak dotknięty nie

33
00:03:42,480 --> 00:03:49,170
jest prawdziwy, a rekwizyty są oczywiście naszą zależnością, teraz, aby uniknąć nieskończonej pętli renderowania, możemy użyć składni destrukcyjnej obiektu

34
00:03:49,650 --> 00:03:56,640
i wyciągnąć przy zmianie danych wejściowych, aby w przypadku zmiany innych rekwizytów nie ponownie zastosuj ten efekt, ponieważ na wejściu

35
00:03:56,640 --> 00:04:01,890
potrzebujemy zmiany, a teraz możemy dodać, że jest to zależność, a inne rzeczy, inne zmiany

36
00:04:01,890 --> 00:04:03,820
w rekwizytach tego nie spowodują.

37
00:04:04,260 --> 00:04:10,620
Więc teraz wywołujemy to na komponencie nadrzędnym za każdym razem, gdy zostanie to dotknięte, a następnie przekazujemy wartość

38
00:04:10,650 --> 00:04:13,470
i ważność tego wejścia do komponentu nadrzędnego.

39
00:04:16,680 --> 00:04:23,400
Wykorzystajmy to teraz na ekranie edycji produktu, tam na naszych danych wejściowych, takich jak na tytule, możemy dodać

40
00:04:23,400 --> 00:04:29,670
prop na zmianę danych wejściowych i to jest prop, którego tutaj celuję, więc musisz poprawnie nazwać i

41
00:04:29,670 --> 00:04:34,230
oczekuje się, że otrzyma funkcję jako wartość, która z kolei otrzyma dwa

42
00:04:34,230 --> 00:04:38,140
argumenty po wywołaniu - wartość i ważność tego wejścia.

43
00:04:38,220 --> 00:04:44,490
Więc tutaj chcę wskazać funkcję, która może być naszym, powiedzmy, modułem obsługi zmian danych wejściowych, możemy to przetworzyć, po

44
00:04:44,490 --> 00:04:46,910
prostu zmieniam nazwę, aby była bardziej dopasowana.

45
00:04:47,130 --> 00:04:55,070
Tak więc tutaj można wywołać moduł obsługi zmian danych wejściowych, w ten sposób chcę przekazać mój identyfikator, ponieważ chcę

46
00:04:55,100 --> 00:04:59,930
ponownie użyć go dla wszystkich moich danych wejściowych, a teraz, ponieważ jestem

47
00:04:59,930 --> 00:05:07,940
w składniku ekranu, będziemy mieli wiele danych wejściowych i tam , dlatego otrzymujemy nasz identyfikator, a następnie otrzymujemy wartość i

48
00:05:07,940 --> 00:05:09,410
prawidłowe informacje, prawda?

49
00:05:09,410 --> 00:05:15,740
Tak więc wartość wejściowa i ważność wejściowa, to jest to, co otrzymujemy, prawda,

50
00:05:15,740 --> 00:05:19,940
ponieważ to, co przekazujemy tutaj z wnętrza komponentu

51
00:05:19,940 --> 00:05:22,510
wejściowego, to właśnie przekazujemy

52
00:05:22,580 --> 00:05:31,110
do tego przy funkcji zmiany wejściowej. Dlatego nie musimy tutaj sprawdzać poprawności, musimy jedynie przekazać te informacje. Przekazujemy wartość wejściową, przekazujemy ważność wejścia, a stanie

53
00:05:31,110 --> 00:05:38,310
się to tylko wtedy, gdy dane wejściowe zostaną dotknięte przy okazji, więc gdy straci koncentrację i oczywiście jest to

54
00:05:38,310 --> 00:05:40,320
tylko ograniczenie, które dodałem

55
00:05:43,310 --> 00:05:48,010
tutaj, że musisz stracić koncentrację, ty może oczywiście również przejść do komponentu

56
00:05:48,020 --> 00:05:53,060
wejściowego i usunąć to, jeśli zaznaczysz, aby zaktualizować ważność i wartość w komponencie

57
00:05:53,060 --> 00:05:59,260
nadrzędnym dla każdego wejścia i każdego naciśnięcia klawisza. Teraz jedna dodatkowa rzecz, którą chcę zrobić, chcę

58
00:05:59,260 --> 00:06:07,390
zawrzeć to w wywołaniu zwrotnym użycia, aby ta funkcja nie była niepotrzebnie przebudowywana, ponieważ należy pamiętać, że przekazaliśmy tę funkcję po

59
00:06:07,510 --> 00:06:13,050
zmianie danych wejściowych w komponencie wejściowym i tam z drugiej strony jest to zależność tego

60
00:06:13,060 --> 00:06:13,630
efektu,

61
00:06:13,630 --> 00:06:15,400
więc ten efekt będzie

62
00:06:15,430 --> 00:06:18,190
powtarzany za każdym razem, gdy się zmieni.

63
00:06:18,190 --> 00:06:22,780
Dlatego nie powinno się to zmieniać zbyt często, aby uniknąć niepotrzebnych efektów,

64
00:06:22,810 --> 00:06:28,900
dlatego tutaj musimy określić nasze zależności, a jedyną zależnością, którą mamy, jest stan formularza wysyłki, który

65
00:06:29,080 --> 00:06:31,690
faktycznie nigdy się nie zmieni, więc jesteśmy

66
00:06:31,690 --> 00:06:32,430
dobrzy,

67
00:06:32,430 --> 00:06:35,620
to nigdy nie powinno się odbudowywać, ponieważ logika

68
00:06:35,680 --> 00:06:43,690
tam się nie zmienia, otrzymujemy wszystkie wartości, których potrzebujemy jako argumenty. Mając to na ekranie edycji produktu, nadal mam swoje formularze, które oczywiście zawierają wszystkie wartości i ważność formularzy, ale zarządzam tylko to

69
00:06:50,310 --> 00:06:55,600
tutaj, ponieważ muszę go przesłać później i ponieważ muszę uzyskać ogólną ważność formularza. Nie robię tego, ponieważ

70
00:06:55,600 --> 00:06:58,280
muszę tutaj zarządzać każdym wejściem, zamiast

71
00:06:58,390 --> 00:07:05,100
tego robimy to z wnętrza komponentu wejściowego. Do przesłania itd.

72
00:07:05,100 --> 00:07:06,460
Nadal

73
00:07:06,500 --> 00:07:18,810
potrzebujemy informacji o każdym sklepie, jednak wartość. Teraz, jeśli wrócę do danych wejściowych, nie zapominaj, że musisz również ustawić wartość

74
00:07:19,320 --> 00:07:22,600
początkową prop i czy powinno to

75
00:07:22,680 --> 00:07:31,290
być początkowo prawidłowe, więc jeśli wrócę do ekranu edycji produktu, teraz powinniśmy ustawić tutaj wartość początkową na co?

76
00:07:31,320 --> 00:07:35,640
Cóż, możemy sprawdzić, czy mamy edytowany produkt, a jeśli tak, to tutaj należy zmienić wartość

77
00:07:35,640 --> 00:07:37,150
początkową produktu. tytuł,

78
00:07:37,170 --> 00:07:44,760
w przeciwnym razie jest to pusty ciąg i powinno to być początkowo prawidłowe, więc użyj tego

79
00:07:45,480 --> 00:07:47,480
wniosku tutaj, jeśli mamy

80
00:07:49,830 --> 00:07:51,860
edytowany produkt, więc jeśli

81
00:07:51,870 --> 00:08:00,780
tak, to z podwójnym hukiem tutaj, jeśli to prawda. Jeśli nie mamy edytowanego produktu, nie może to być początkowo

82
00:08:00,780 --> 00:08:01,530
ważne,

83
00:08:01,530 --> 00:08:03,390
więc przekazuję false,

84
00:08:03,390 --> 00:08:07,210
co jest dobre, i tak właśnie powinno być.

85
00:08:07,280 --> 00:08:13,040
Teraz możemy skopiować te dwa wiersze, również do imageUrl, tam oczywiście przekazujemy wartość adresu URL obrazu

86
00:08:13,040 --> 00:08:20,400
jako wartość domyślną, poza tym może pozostać w ten sposób. W przypadku ceny nigdy nie będziemy mieć wartości początkowej

87
00:08:20,400 --> 00:08:25,650
i nigdy nie będzie początkowo ważna. Z drugiej strony, aby dodać opis,

88
00:08:25,660 --> 00:08:28,950
możemy ponownie dodać to i tutaj wskazać na opis.

89
00:08:32,270 --> 00:08:39,050
Teraz jest jedna rzecz, którą muszę naprawić w elemencie wejściowym, o której również pomyślałem, oczywiście tutaj stan

90
00:08:39,050 --> 00:08:43,450
formularza nie jest już dostępny, zamiast tego mamy tutaj swój stan

91
00:08:43,450 --> 00:08:47,950
wewnętrzny i nadałem mu nazwę stanu wejściowego, to jest co zwraca

92
00:08:47,960 --> 00:08:49,870
mój reduktor, więc oczywiście

93
00:08:50,120 --> 00:08:51,700
powinniśmy tego użyć.

94
00:08:51,700 --> 00:08:57,830
Więc tutaj mamy inputState. wartość jako wartość, to takie proste

95
00:08:57,920 --> 00:09:03,590
i tutaj mamy inputState. Jest ważny jako czek i to powinno być wszystko.

96
00:09:03,590 --> 00:09:10,060
Teraz, jeśli uratujemy to i przyjrzymy się temu, zobaczmy, czy to działa. Jeśli tu przejdziemy, początkowo mamy wszystkie komunikaty o

97
00:09:10,060 --> 00:09:13,360
błędach, co ma sens, ponieważ wszystkie są początkowo nieprawidłowe,

98
00:09:13,790 --> 00:09:20,500
jeśli zacznę pisać tutaj, pojawia się błąd, nie mogę znaleźć zmiennej isValid w moim komponencie wejściowym, który musi

99
00:09:20,500 --> 00:09:26,910
być w ten program obsługi, który strzela przy każdym naciśnięciu klawisza, prawdopodobnie tutaj, tak, w reduktorze oczywiście

100
00:09:26,920 --> 00:09:30,000
powinienem sprawdzić działanie.

101
00:09:30,000 --> 00:09:32,490
isValid, nie tylko isValid, muszę

102
00:09:32,730 --> 00:09:37,470
to wyciągnąć z akcji. Więc z tą poprawką

103
00:09:37,480 --> 00:09:42,240
tutaj wróćmy i spróbujmy jeszcze raz. Jeśli zacznę pisać, ta opcja zostanie

104
00:09:42,270 --> 00:09:46,530
wyczyszczona, jeśli ją cofnę, mój błąd nie wraca, więc jest to

105
00:09:46,530 --> 00:09:50,800
mały błąd, który musimy naprawić. W przypadku ceny 0

106
00:09:50,800 --> 00:09:55,330
nie jest wtedy traktowane jako prawidłowe, jedno też nie jest, więc

107
00:09:55,350 --> 00:09:58,590
sprawdzanie poprawności ma pewne problemy, ale wpisywanie

108
00:09:58,590 --> 00:10:03,490
itd. Działa, ale zobaczmy, co jest teraz nie tak z sprawdzaniem poprawności.

109
00:10:03,500 --> 00:10:07,090
Oczywiście sposób, w jaki działa tutaj sprawdzanie poprawności, nie używamy go.

110
00:10:07,100 --> 00:10:12,290
Należy pamiętać, że zawsze sprawdzam, czy ten typ sprawdzania poprawności jest włączony dla tego wejścia, czy tego typu, czy tego typu i robimy

111
00:10:12,290 --> 00:10:17,000
to za pomocą tych specjalnych rekwizytów, które musimy ustawić. Obecnie nie jest

112
00:10:17,030 --> 00:10:22,980
włączone sprawdzanie poprawności, więc uwzględniane są tylko domyślne nieprawidłowe wartości.

113
00:10:23,060 --> 00:10:28,610
Więc jeśli przejdę do ekranu edycji produktu, teraz włączamy tę specjalną weryfikację, ustawiając odpowiednie rekwizyty,

114
00:10:28,610 --> 00:10:39,170
na przykład tutaj w polu wprowadzania tytułu, wymagane. Na imageUrl również wymagane. Na cenę tutaj wymagana, a także

115
00:10:39,470 --> 00:10:47,540
może min równa zero, więc zero jest minimalną liczbą, którą musimy wprowadzić, lub liczbą

116
00:10:47,540 --> 00:10:48,350
większą

117
00:10:48,380 --> 00:10:58,480
niż faktycznie, więc może 0. 1 to nasza minimalna liczba. Do opisu powinien być również wymagany, a być może także min.

118
00:10:58,540 --> 00:11:05,100
Długość równy 5, aby mieć co najmniej 5 znaków. Jest jeszcze jedna dodatkowa rzecz, którą musimy zrobić tutaj

119
00:11:05,100 --> 00:11:11,070
na ekranie edycji produktu, ta funkcja obsługi zmian danych wejściowych tutaj również musi być dodana do

120
00:11:11,130 --> 00:11:16,870
każdego wejścia, oczywiście nie tylko do tytułu. Musimy więc dodać to do

121
00:11:16,870 --> 00:11:26,760
imageUrl, inaczej otrzymamy błąd później, będziemy musieli dodać to tutaj do danych wejściowych ceny, musimy również dodać to tutaj oczywiście do

122
00:11:26,760 --> 00:11:30,580
danych wejściowych i zastąpić identyfikator we właściwy sposób.

123
00:11:32,810 --> 00:11:36,010
Przetestujmy to, a zauważysz coś dziwnego, jeśli

124
00:11:36,040 --> 00:11:39,000
wpiszesz tutaj, to zadziała, jeśli wpiszesz

125
00:11:39,000 --> 00:11:41,210
w imageUrl, nie działa

126
00:11:41,220 --> 00:11:47,300
poprawnie, sprawdzanie poprawności się nie aktualizuje i przynajmniej nie możesz wrócić to może utknąć.

127
00:11:47,310 --> 00:11:54,990
Więc jeśli przeładujemy to z błędem polecenia lub podwójnym naciśnięciem R na Androidzie i spróbujemy tutaj

128
00:11:55,010 --> 00:12:00,950
jeszcze raz, powiedzmy, że cena zauważysz, że to działa, ale dlaczego to

129
00:12:00,950 --> 00:12:05,630
nie działa i tak przy okazji jeśli wypróbowałeś to na

130
00:12:05,670 --> 00:12:10,200
imageUrl, tutaj to działa. Dlaczego to działa, jeśli wcześniej edytowałem inne dane wejściowe,

131
00:12:10,200 --> 00:12:15,100
ponieważ teraz na przykład nie działa już w przypadku tytułu? Problem związany jest z utknięciem tutaj.

132
00:12:15,390 --> 00:12:22,500
Zbyt często przekazujemy ten komponent, a jego przyczyny naprawdę trudno jest wyśledzić.

133
00:12:23,010 --> 00:12:24,980
W końcu mamy tutaj coś w rodzaju

134
00:12:24,990 --> 00:12:27,290
nieskończonej pętli, a problemem jest nasza procedura wprowadzania zmian.

135
00:12:27,420 --> 00:12:34,290
Używamy tutaj wywołania zwrotnego, aby uniknąć niepotrzebnego odtwarzania, ale wiążąc go w ten sposób, w pewien sposób renderujemy

136
00:12:34,290 --> 00:12:40,710
to przestarzałe, nie robi to teraz żadnej różnicy, ponieważ spowoduje to utworzenie nowej funkcji powiązania dla każdego

137
00:12:40,800 --> 00:12:42,230
cyklu ponownego wysyłania.

138
00:12:42,750 --> 00:12:49,590
Więc w końcu musimy usunąć powiązanie tutaj, usunąć je tutaj we wszystkich tych miejscach, ponieważ

139
00:12:49,590 --> 00:12:51,550
spowoduje to uszkodzenie

140
00:12:51,780 --> 00:12:56,980
naszej aplikacji, spowoduje zbyt wiele cykli ponownego wysyłania z powodu braku efektu

141
00:12:57,210 --> 00:13:01,200
wywołania zwrotnego użycia i zamiast tego możemy chcesz przesłać

142
00:13:01,200 --> 00:13:05,850
prop ID tytułu i tak dalej do naszego komponentu wejściowego.

143
00:13:06,050 --> 00:13:14,200
Dodajmy to do wszystkich tych danych wejściowych, ten identyfikator ID jest w zasadzie tym, co wcześniej dodałem w wywołaniu wiązania, więc po

144
00:13:14,260 --> 00:13:18,860
prostu przekazujemy to do elementu wejściowego, abyśmy mogli go tam użyć, zróbmy to

145
00:13:18,880 --> 00:13:23,430
dla wszystkich tych danych wejściowych tutaj i jak możemy tego użyć?

146
00:13:23,470 --> 00:13:27,910
Cóż, wewnątrz wejścia, mamy teraz ten odpowiedni identyfikator ID, więc

147
00:13:27,910 --> 00:13:30,820
możemy go po prostu dołączyć.

148
00:13:30,880 --> 00:13:38,280
Więc tutaj możemy przesyłać rekwizyty. id lub po prostu ID, abyśmy nie musieli tutaj dodawać

149
00:13:38,280 --> 00:13:44,370
rekwizytów i zamiast tego wyciągali tutaj ID z rekwizytów, tak jak zrobiliśmy to przy zmianie danych wejściowych

150
00:13:44,470 --> 00:13:50,470
i dodawali ID jako zależność tego efektu później. A teraz nadal przekazujemy identyfikator tego wejścia,

151
00:13:50,830 --> 00:13:55,630
ale w bardziej elegancki sposób, który pozwala uniknąć użycia wiązania, które w

152
00:13:55,630 --> 00:13:59,000
końcu odtwarza tę funkcję dla każdego cyklu renderowania,

153
00:13:59,140 --> 00:14:03,430
a zatem prowadzi do nieskończonej pętli, a zatem teraz, jeśli przeładujemy

154
00:14:06,890 --> 00:14:15,490
to i przejdź do sekcji administracyjnej tutaj, teraz mogę wprowadzić coś tutaj, a także tu i teraz, to działa, ponieważ teraz unikamy

155
00:14:15,490 --> 00:14:19,660
tego nieskończonego cyklu renderowania i otrzymujemy sprawdzanie poprawności tak, jak chcieliśmy.

156
00:14:19,690 --> 00:14:26,170
Więc to jest moje podejście lub takie podejście, które chciałem wam tutaj pokazać, którego można użyć, aby mieć

157
00:14:26,170 --> 00:14:31,630
element wejściowy wielokrotnego użytku, który wykonuje własną weryfikację, którą można skonfigurować z zewnątrz i gdzie

158
00:14:31,630 --> 00:14:33,960
nadal można zarządzać ogólną formą.

159
00:14:34,060 --> 00:14:36,120
Dzięki temu przejdźmy do drobnego dostrojenia,

160
00:14:36,220 --> 00:14:42,070
takiego jak na przykład stylizowanie tego komunikatu o błędzie, który wyświetlamy, tego komunikatu o błędzie sprawdzania poprawności, a także

161
00:14:42,070 --> 00:14:45,310
kontrolowanie, kiedy go wyświetlamy, ponieważ nie chcę go cały czas pokazywać.