1 00:00:02,300 --> 00:00:08,300 Kontynuujmy pracę nad tym i zmieńmy to na powiedzmy funkcję obsługi zmiany tekstu, którą 2 00:00:09,020 --> 00:00:10,390 teraz przypisaliśmy 3 00:00:10,400 --> 00:00:16,420 do tekstu onChange tutaj w tytule, ale którą możemy również dodać do naszego imageUrl. 4 00:00:16,430 --> 00:00:22,640 Więc tutaj dla tekstu onChange, ustawiłem to również na procedurę zmiany tekstu i teraz, aby to 5 00:00:22,640 --> 00:00:28,030 działało, musimy upewnić się, że ta funkcja otrzymuje informacje o tym, dla którego 6 00:00:28,070 --> 00:00:32,390 wejścia została uruchomiona, więc czy wpisałeś tytuł, czy Wejście imageUrl. 7 00:00:32,570 --> 00:00:36,580 Więc poza otrzymaniem tekstu, spodziewam się również innego argumentu, spodziewam się 8 00:00:36,710 --> 00:00:42,290 uzyskać mój identyfikator wejściowy lub coś w tym rodzaju, możesz nazwać go, jak chcesz, aby ta funkcja 9 00:00:42,290 --> 00:00:47,420 mogła być ponownie użyta do wielokrotnego wprowadzania tekstu i nadal otrzymujemy informacje o tym, które 10 00:00:47,420 --> 00:00:48,560 dane wejściowe 11 00:00:48,680 --> 00:00:54,080 uruchomiły to, abyśmy mogli przekazać to do naszego reduktora, gdzie później będziemy potrzebować tych informacji, aby 12 00:00:54,080 --> 00:00:55,370 poprawnie zaktualizować nasz stan. 13 00:00:55,610 --> 00:01:01,520 Teraz, aby uzyskać tę funkcjonalność identyfikatora wejściowego, musimy udać się do miejsc, w których korzystamy z procedury 14 00:01:01,520 --> 00:01:09,140 zmiany tekstu i tam, na przykład, możemy użyć wiązania lub użyć zawijającej anonimowej funkcji strzałki zamiast tego, aby powiązać to tam, gdzie 15 00:01:09,140 --> 00:01:14,570 mnie to nie obchodzi, ale więcej co ważne, aby skonfigurować argumenty, funkcja ta dostanie i 16 00:01:14,570 --> 00:01:19,700 tam jest jeden specjalny argument, który chcę przekazać i to jest identyfikator wejściowy. 17 00:01:19,990 --> 00:01:24,650 I dla tej funkcji tutaj, dla tego wywołania funkcji 18 00:01:24,650 --> 00:01:33,870 przy wprowadzaniu tekstu, oczywiście będzie to tytuł. Dla tych danych wejściowych związalibyśmy ten imageUrl i 19 00:01:34,060 --> 00:01:40,450 znowu powinien to być identyfikator, który masz również w swoim stanie tam, 20 00:01:40,570 --> 00:01:49,110 w swojej formie, który przekazujesz do reduktora. Po dodaniu tego upewnimy się, że procedura zmiany tekstu jest wykonywana 21 00:01:49,110 --> 00:01:51,710 i otrzyma ten argument identyfikatora wejściowego. 22 00:01:51,990 --> 00:01:56,430 Zostanie również odebrany argument tekstowy, ponieważ jest to domyślny argument, który React Native 23 00:01:56,430 --> 00:02:01,740 i tak by nam przekazał, a następnie zostanie on automatycznie odebrany jako ostatni argument w tej funkcji. 24 00:02:01,800 --> 00:02:05,000 Więc nie musimy i nie możemy tego tutaj 25 00:02:05,010 --> 00:02:07,410 powiązać, zostanie ono automatycznie przesłane. 26 00:02:07,680 --> 00:02:13,260 Teraz mamy tutaj funkcję obsługi zmiany tekstu wielokrotnego użytku i 27 00:02:13,440 --> 00:02:21,030 możemy to przypisać również do innych danych wejściowych, takich jak tutaj do imageUrl, jak tutaj dla 28 00:02:21,060 --> 00:02:27,390 ceny, możemy powiązać procedurę zmiany tekstu, powiązać to, a cena jest naszym identyfikatorem 29 00:02:27,720 --> 00:02:35,540 tutaj i oczywiście również dla opisu, wklejamy to, a następnie łączymy z tym, a identyfikatorem jest opis. 30 00:02:35,780 --> 00:02:40,910 Teraz ten sam moduł obsługi może być używany dla wszystkich danych wejściowych, ale 31 00:02:40,910 --> 00:02:44,240 teraz robi jedną rzecz, sprawdza każdą wejściową długość. 32 00:02:44,240 --> 00:02:46,990 To może mieć sens i tutaj 33 00:02:47,030 --> 00:02:52,070 nie ma, żadne dane wejściowe nie powinny być puste, ale możesz chcieć 34 00:02:52,070 --> 00:02:58,130 też innych walidacji, na przykład moja cena tutaj powinna być większa niż zero, powiedzmy, 35 00:02:58,160 --> 00:03:05,360 więc zero nie jest dozwolone jako dane wejściowe. Z drugiej strony nie są to niektóre kryteria, które mają dla 36 00:03:05,360 --> 00:03:10,670 mnie znaczenie w przypadku innych danych wejściowych. Później znajdziemy eleganckie rozwiązanie tego problemu, na razie 37 00:03:10,670 --> 00:03:16,700 trzymajmy się tej najmniejszej wspólnej walidacji mianownika, którą możemy zastosować do wszystkich danych wejściowych, aby upewnić się, że przynajmniej nie 38 00:03:16,700 --> 00:03:18,690 są puste, i skupmy się na 39 00:03:19,120 --> 00:03:23,040 funkcji reduktora i na tym, jak wygląda nasz formularz powinien się zmienić 40 00:03:23,060 --> 00:03:26,990 po wysłaniu tego formularza aktualizacji danych ze wszystkimi tymi danymi, ponieważ w tej 41 00:03:26,990 --> 00:03:28,720 chwili nic się nie wydarzy. 42 00:03:28,760 --> 00:03:33,920 Mamy tam swój stan początkowy na reduktorze, który zostanie przekazany lub zapisany w stanie formularza, ale 43 00:03:33,920 --> 00:03:36,050 ten stan nigdy się nie zmieni. 44 00:03:36,080 --> 00:03:38,770 Właśnie dlatego wysyłamy akcję, prawda? 45 00:03:38,820 --> 00:03:40,550 Dlatego to robimy tutaj, 46 00:03:40,560 --> 00:03:46,190 dlatego wysyłana jest aktualizacja danych wejściowych formularza i dlatego chcemy napisać tutaj kod w reduktorze, 47 00:03:46,200 --> 00:03:49,190 gdy ta akcja dotrze do nas tutaj. 48 00:03:49,500 --> 00:03:55,650 Teraz, jeśli ta akcja do nas dotrze, ostatecznie celem jest upewnienie się, że zaktualizujemy migawkę tego 49 00:03:55,650 --> 00:03:56,220 stanu, 50 00:03:56,220 --> 00:03:58,340 naszą migawkę bieżącego stanu odpowiednio. 51 00:03:58,650 --> 00:04:04,470 Oznacza to, że na przykład będziemy potrzebować zaktualizowanych wartości i w tym celu utworzę nowy 52 00:04:04,470 --> 00:04:05,910 obiekt, ponieważ tutaj 53 00:04:06,030 --> 00:04:11,850 moje wartości wejściowe, to jest obiekt i utworzę nowy, aby go zastąpić, a przede 54 00:04:11,850 --> 00:04:14,340 wszystkim skopiuję istniejący wartości wejściowe stanu. 55 00:04:14,400 --> 00:04:19,650 Należy pamiętać, że stan tutaj jest przekazywany automatycznie, to jest nasza bieżąca migawka stanu 56 00:04:19,650 --> 00:04:25,500 przed jej zaktualizowaniem, a zatem początkowo jest to na przykład migawka stanu tutaj, która będzie 57 00:04:25,500 --> 00:04:27,610 miała klucz wartości wejściowych, który 58 00:04:27,720 --> 00:04:29,420 z kolei przechowuje obiekt 59 00:04:29,460 --> 00:04:35,910 i to po prostu Kopiuję tutaj, kopiuję wszystkie pary klucz-wartość tej migawki wartości wejściowych, a następnie chcę 60 00:04:35,910 --> 00:04:40,230 zastąpić parę klucz-wartość dla danych wejściowych, dla których została wysłana ta 61 00:04:40,230 --> 00:04:46,740 akcja, dobrze, że dołączamy dane wejściowe identyfikator akcji. Możemy więc przejść do reduktora 62 00:04:46,740 --> 00:04:52,360 i dynamicznie zastąpić tutaj klucz w skopiowanych wartościach wejściowych, 63 00:04:52,380 --> 00:04:57,900 kluczem jest działanie. dane wejściowe, to jest nasz identyfikator wejściowy, który podłączyliśmy do akcji, 64 00:04:57,900 --> 00:05:00,420 a wartością powinna być akcja. wartość, 65 00:05:00,420 --> 00:05:06,840 to wszystko, co musimy zrobić. Tak więc dynamicznie przechowujemy wartość, która została 66 00:05:06,840 --> 00:05:12,060 wysłana z również dynamicznie przypisywanym wejściem i aktualizujemy nasze skopiowane wartości wejściowe. 67 00:05:12,060 --> 00:05:17,360 Teraz możemy zwrócić nowy stan tutaj, ponieważ taki jest cel twojego własnego reduktora, tak jak w 68 00:05:17,360 --> 00:05:21,360 przypadku reduktora Redux, w końcu musi on zwrócić nową migawkę stanu i 69 00:05:21,840 --> 00:05:28,800 tam chcę skopiować istniejący stan, ale zastąpić wartości wejściowe za pomocą zaktualizowałem wartości, które kopiują moje stare wartości, aby żadne dane nie 70 00:05:28,800 --> 00:05:36,230 zostały utracone, a następnie zastępują jedną z zawartych tam par klucz-wartość. Teraz oczywiście nie chodzi tylko o 71 00:05:36,260 --> 00:05:39,820 zastąpienie wartości lub zaktualizowanie wartości, chcę 72 00:05:39,890 --> 00:05:42,810 również zaktualizować moje ważności. 73 00:05:42,920 --> 00:05:48,700 Oto moje zaktualizowane ważności i tak jak w przypadku wartości, zacznę od skopiowania mojego klucza 74 00:05:48,710 --> 00:05:53,240 poprawności danych wejściowych, ponieważ, jak widać, ważność danych wejściowych jest kluczem, 75 00:05:53,340 --> 00:05:54,050 a 76 00:05:57,300 --> 00:06:05,190 następnie chcę zastąpić jedną ważność danych wejściowych, które otrzymujemy w działaniu , więc tytuł, imageUrl lub cokolwiek to jest i 77 00:06:05,220 --> 00:06:10,320 zastąpienie tego działaniem jest ważne, ponieważ otrzymujemy informację, czy jest to prawidłowe, czy 78 00:06:10,320 --> 00:06:13,790 nie, jako część akcji, która jest wysyłana, prawda? 79 00:06:13,800 --> 00:06:17,400 Przekazujemy to tutaj na podstawie tej podstawowej weryfikacji, którą tutaj mamy. 80 00:06:19,810 --> 00:06:24,160 Teraz musimy to zaktualizować tutaj, więc nasze ważności 81 00:06:24,340 --> 00:06:30,220 wejściowe są równe zaktualizowanym ważnościom, a teraz musimy tylko zarządzać ogólną 82 00:06:30,220 --> 00:06:33,430 poprawnością formularza. W tym celu 83 00:06:34,640 --> 00:06:41,270 dodaję zmienną, zmienną pomocniczą, forma jest poprawna, która początkowo jest prawdziwa, a następnie przeglądam wszystkie moje 84 00:06:41,270 --> 00:06:43,160 zaktualizowane ważności, które są moimi 85 00:06:43,160 --> 00:06:45,050 starymi skopiowanymi ważnościami, a 86 00:06:45,080 --> 00:06:49,520 następnie jedną zaktualizowaną ważność dla danych wejściowych, które właśnie wpisaliśmy. 87 00:06:49,580 --> 00:06:57,020 Mamy tutaj pętlę for / in, w której przechodzimy przez wszystkie klucze w zaktualizowanych terminach ważności, a cel jest 88 00:06:57,020 --> 00:07:03,170 prosty, sprawdzam poprawność każdego formularza wejściowego i jeśli wszystkie poprawności wejściowe formularza są prawidłowe, jeśli wszystkie 89 00:07:03,170 --> 00:07:06,170 są prawdziwe, to ogólna formularz jest ważny. 90 00:07:06,230 --> 00:07:08,980 Jeśli co najmniej jeden z nich 91 00:07:09,000 --> 00:07:17,090 jest fałszywy, ogólny formularz jest fałszywy, ogólny formularz jest nieprawidłowy. Dlatego też tutaj formularz jest poprawny jest równy najnowszemu 92 00:07:17,120 --> 00:07:24,320 formularzowi, który mamy, a następnie sprawdzamy aktualność ważności dla danych wejściowych, więc dla tego klucza i przechodzimy 93 00:07:24,330 --> 00:07:26,320 przez wszystkie dane tutaj. 94 00:07:26,480 --> 00:07:31,530 Sposób, w jaki działa ten operator boolowski, jest taki, że fałsz zastępuje wartość true, więc jeśli 95 00:07:31,640 --> 00:07:37,730 jakiekolwiek dane wejściowe są fałszywe, forma jest poprawna, zostanie ustawiona na false, a później nie będzie można ustawić wartości true. 96 00:07:37,730 --> 00:07:43,010 Więc jeśli co najmniej jedno dane wejściowe są niepoprawne, ogólna forma będzie 97 00:07:43,010 --> 00:07:48,200 niepoprawna, a zatem nie muszę już kopiować tutaj mojego stanu, ponieważ 98 00:07:48,200 --> 00:07:51,460 zastąpię całą migawkę stanu i ustawię prawidłową 99 00:07:52,940 --> 00:08:02,910 formę na moją pochodną. oczywiście, aby uniknąć nieporozumień, możemy również nazwać ten zaktualizowany formularz, który jest ważny tutaj i tutaj oraz tutaj i 100 00:08:03,540 --> 00:08:04,270 tutaj. 101 00:08:06,030 --> 00:08:09,900 Teraz jeszcze jedna dodatkowa rzecz, jeśli nie zrobimy tego 102 00:08:09,930 --> 00:08:16,560 w bloku if, więc jeśli zostanie wysłana jakaś inna akcja lub coś innego, zwrócę tutaj 103 00:08:16,560 --> 00:08:18,870 niezmieniony stan. Dzięki temu 104 00:08:18,870 --> 00:08:26,590 dodaliśmy logikę reduktora, która jest w stanie obsłużyć każde wejście lub każde wpisanie do dowolnego z naszych wpisów tekstowych, teraz musimy tylko 105 00:08:26,610 --> 00:08:31,560 użyć stanu formularza, który będzie się zmieniać przy każdym naciśnięciu klawisza, co dzieje się 106 00:08:31,560 --> 00:08:38,010 wcześniej, ale teraz jest scentralizowane i połączyło się w jeden stan zarządzany, który moim zdaniem jest znacznie czystszy 107 00:08:38,190 --> 00:08:45,600 niż posiadanie ton różnych stanów pod względem ważności i wartości. Nawiasem mówiąc, ręczne i osobne zarządzanie 108 00:08:45,600 --> 00:08:53,330 wszystkimi tymi stanami stałoby się dużym problemem, gdy chcesz następnie zweryfikować ogólną ważność formularza. 109 00:08:53,340 --> 00:08:59,250 Teraz możemy użyć stanu formularza, który będzie się zmieniać przy każdym naciśnięciu klawisza, i używamy 110 00:08:59,790 --> 00:09:07,610 go na przykład tutaj dla wartości. Cofamy wartość tej metody wprowadzania tekstu poprzez dostęp do wartości wejściowych stanu formularza. tytuł. 111 00:09:07,620 --> 00:09:15,160 Teraz oczywiście robimy to samo dla imageUrl, wprowadzamy to z powrotem, więc właśnie to, co zrobiliśmy 112 00:09:15,160 --> 00:09:19,710 wcześniej i teraz z naszym stanem formularza zarządzanym za 113 00:09:19,720 --> 00:09:26,040 pomocą reduktora, to samo dla ceny oczywiście, a także to samo dla taki opis. 114 00:09:29,530 --> 00:09:35,010 Teraz oprócz zmiany tutaj, musimy go również zmienić w niektórych innych miejscach, na przykład 115 00:09:35,140 --> 00:09:39,730 tutaj w module obsługi przesyłania. Tam tytuł jest poprawny, to 116 00:09:39,730 --> 00:09:50,540 już nie istnieje, ale możemy sprawdzić tytuł poprawności wejściowej stanu formularza, który jest prawdziwy lub fałszywy, a jeśli jest fałszywy, oznacza to, że 117 00:09:50,540 --> 00:09:52,250 jest niepoprawny, więc 118 00:09:52,250 --> 00:09:54,400 sprawdzenie powinno być prawidłowe. 119 00:09:54,530 --> 00:09:59,960 Oczywiście dbamy jednak o ważność wszystkich danych wejściowych, więc zamiast po prostu sprawdzać je tutaj 120 00:09:59,960 --> 00:10:05,270 ręcznie, łącząc je w długą instrukcję if, możemy po prostu sprawdzić, czy formularz stanu 121 00:10:05,270 --> 00:10:10,880 formularza jest poprawny, ponieważ jest to fałsz, ponieważ oznacza to, że niektóre dane wejściowe są 122 00:10:10,880 --> 00:10:11,750 fałszywe i 123 00:10:11,750 --> 00:10:18,300 dlatego pokazujemy ten błąd, to jest krótsza kontrola i jest to również wtedy, gdy chcemy uniknąć przesłania formularza. 124 00:10:18,300 --> 00:10:23,450 Jeśli formularz zostanie przesłany, opis tytułu i imageUrl, który już nie istnieje, zamiast 125 00:10:23,550 --> 00:10:29,380 tego jest to teraz stan wartości wejściowych. tytuł i tak dalej, 126 00:10:29,400 --> 00:10:30,950 więc robimy 127 00:10:32,290 --> 00:10:40,790 to samo tutaj dla opisu i imageUrl. Nasze wartości czerpiemy ze stanu 128 00:10:40,790 --> 00:10:50,250 formularza, to samo oczywiście tutaj do tworzenia. Otrzymujemy tytuł i opis oraz imageUrl, a także oczywiście cenę, 129 00:10:50,250 --> 00:10:55,200 którą wciąż przeliczam na liczbę z plusem tutaj, otrzymujemy to 130 00:10:55,200 --> 00:11:02,130 wszystko z naszego stanu wartości wejściowych. Dlatego oczywiście naszą zależnością nie jest tytuł, opis, imageUrl 131 00:11:02,130 --> 00:11:08,490 i tak dalej, a jedynie stan formularza. Jeśli formularz określa zmiany, które będzie przy każdym naciśnięciu 132 00:11:08,490 --> 00:11:13,170 klawisza, to funkcja ta powinna zostać przebudowana i musi zostać przebudowana, ponieważ informacje 133 00:11:13,200 --> 00:11:14,790 używane przez funkcję 134 00:11:14,790 --> 00:11:16,980 zmieniają się za każdym naciśnięciem klawisza, 135 00:11:17,070 --> 00:11:23,750 ważność może się zmieniać za każdym naciśnięciem klawisza, wartości, które chcesz przesłać można zmienić za każdym naciśnięciem klawisza. 136 00:11:23,880 --> 00:11:29,820 Możemy również oczywiście teraz użyć tego, aby wyświetlić nasz komunikat o błędzie. Zamiast sprawdzania poprawności tytułu, 137 00:11:29,820 --> 00:11:31,330 który 138 00:11:31,380 --> 00:11:41,850 już nie istnieje, sprawdzamy formState. inputValidities. tytuł, jeśli to nieprawda, to chcę pokazać ten tekst. 139 00:11:41,960 --> 00:11:42,680 Więc teraz, 140 00:11:42,680 --> 00:11:47,440 jeśli to wszystko uratujemy, powinniśmy być w stanie to sprawdzić. Jeśli przejdziemy na naszą stronę tutaj, 141 00:11:47,450 --> 00:11:49,320 początkowo widzimy ten błąd. 142 00:11:49,340 --> 00:11:51,650 Jeśli zacznę pisać, zniknie, jeśli spróbuję 143 00:11:51,690 --> 00:11:55,640 to przesłać, nie powiedzie się, ponieważ mam trzy puste dane wejściowe. 144 00:11:55,640 --> 00:11:58,800 Jeśli jednak wprowadzę tam coś ważnego, 145 00:11:58,850 --> 00:12:02,100 to zadziała. Jeśli spróbuję edytować, 146 00:12:02,270 --> 00:12:05,100 spróbujmy tego na Androidzie, może pomieszać. 147 00:12:05,420 --> 00:12:11,140 Więc jeśli spróbuję edytować tutaj czerwoną koszulę, mogę to dobrze przesłać, 148 00:12:11,150 --> 00:12:13,290 teraz spróbujmy też 149 00:12:13,320 --> 00:12:18,080 przesłać ją, jeśli jest pusta, a następnie otrzymam alert. 150 00:12:18,080 --> 00:12:20,620 Działa to tak, jak powinno działać, 151 00:12:24,840 --> 00:12:31,700 teraz z tym bardziej eleganckim zarządzaniem formularzami za pomocą reduktora użycia i oczywiście nie można po prostu używać 152 00:12:31,700 --> 00:12:33,020 reduktora użycia podczas 153 00:12:33,080 --> 00:12:38,660 pracy z formularzami, jest to szczególnie dobry przykład, kiedy sensowne jest scalenie wiele stanów 154 00:12:38,660 --> 00:12:42,250 razem i dlatego mają kod wielokrotnego użytku i wydajny. 155 00:12:42,270 --> 00:12:48,290 Teraz jeszcze się nie skończyłem, ponieważ wszystkie te powtórzenia kodu z danymi wejściowymi, które są 156 00:12:48,320 --> 00:12:54,880 zawsze ustrukturyzowane w ten sam sposób i brakiem możliwości dostosowywania w zakresie sprawdzania poprawności, to są rzeczy, 157 00:12:55,040 --> 00:12:56,930 które chcę rozwiązać później.