1 00:00:02,180 --> 00:00:04,700 Reakcja państwa jest kluczową koncepcją. 2 00:00:05,060 --> 00:00:10,820 Dzięki naszej wiedzy na temat stanu możemy teraz upewnić się, że nie tworzymy po prostu fałszywego celu, 3 00:00:10,940 --> 00:00:13,640 ale w rzeczywistości odzwierciedlamy rzeczywisty wkład użytkowników. 4 00:00:14,060 --> 00:00:15,740 W tym celu wróćmy do nowego celu. 5 00:00:16,280 --> 00:00:24,860 To, co chcesz zrobić, to przechowywać dane wejściowe użytkownika w pewnej zmiennej przy każdym naciśnięciu klawisza, abyśmy mieli najnowszą wartość wprowadzoną przez 6 00:00:24,860 --> 00:00:32,300 użytkownika, a następnie przekazali tę wprowadzoną wartość do rekwizytów w celu reklamy lub do naszego nowego celu tutaj zamiast 7 00:00:32,300 --> 00:00:36,170 ten zaszyfrowany tekst manekina, który mamy w tej chwili. 8 00:00:36,950 --> 00:00:37,750 Więc proszę bardzo. 9 00:00:37,880 --> 00:00:43,610 Chcę uchwycić dane wprowadzone tutaj przez użytkownika i wysłać je zamiast mojego ciężkiego przejścia do tekstu tutaj w ramach nowego 10 00:00:43,610 --> 00:00:44,090 celu. 11 00:00:44,840 --> 00:00:54,470 Więc możemy tutaj utworzyć zmienną, wprowadzoną przez użytkownika lub wprowadzony tekst, który początkowo jest pustym ciągiem. 12 00:00:55,280 --> 00:00:58,520 I tutaj, na wejściu, faktycznie są ustawione na zdarzenie zmiany. 13 00:00:58,580 --> 00:01:00,740 Możemy słuchać, który jest uruchamiany i każde naciśnięcie klawisza. 14 00:01:01,310 --> 00:01:02,570 Teraz możemy dodać funkcję. 15 00:01:05,330 --> 00:01:07,240 Program do zmiany tekstu. 16 00:01:08,220 --> 00:01:14,400 Tam otrzymamy obiekt zdarzenia, który będzie zawierał dane wejściowe użytkownika dotyczące zdarzenia. 17 00:01:15,470 --> 00:01:21,080 Cel, który odnosi się do elementu wejściowego, wartości kropki, a zatem moglibyśmy ustawić wprowadzanie tekstu na tym samym 18 00:01:21,080 --> 00:01:21,620 poziomie. 19 00:01:23,440 --> 00:01:26,410 Teraz wprowadzanie tekstu będzie się zmieniać za każdym naciśnięciem klawisza. 20 00:01:26,620 --> 00:01:30,730 Po powiązaniu zmiany z programem obsługi zmiany tekstu, takim jak ten. 21 00:01:32,720 --> 00:01:37,790 Teraz, tutaj w nowym celu, możemy użyć wpisywania tekstu. 22 00:01:37,880 --> 00:01:39,160 Co użytkownik wpisał tutaj? 23 00:01:40,150 --> 00:01:45,900 A potem, zamknijmy całą konsolę i idź tutaj, abyśmy mogli zobaczyć, że to działa, jeśli teraz 24 00:01:45,900 --> 00:01:50,310 będziemy mieć zabezpieczenia i przejdę tutaj test i kliknę na cel. 25 00:01:50,910 --> 00:01:52,890 Widzimy, że to działa i jest tutaj wyprowadzane. 26 00:01:54,050 --> 00:01:58,490 Takie podejście jest ogólnie w porządku, ale może mieć jedną drobną wadę. 27 00:01:58,850 --> 00:02:01,430 Co jeśli chcemy to zresetować po dodaniu nowego celu? 28 00:02:01,970 --> 00:02:04,340 Oczywiście możemy iść do naszego. 29 00:02:05,540 --> 00:02:06,560 Program do obsługi reklam. 30 00:02:08,470 --> 00:02:12,490 Po stworzeniu nowego celu możemy oczywiście ustawić wprowadzanie tekstu z powrotem na pusty ciąg. 31 00:02:13,330 --> 00:02:14,800 Ale oczywiście nic to nie da. 32 00:02:15,280 --> 00:02:18,640 Widzę, że jeśli osiągnąłem jego cel, nie ma to tutaj odzwierciedlenia. 33 00:02:18,700 --> 00:02:19,960 Dlaczego nie jest odzwierciedlone? 34 00:02:20,470 --> 00:02:22,410 Ponieważ nowy złoty składnik się nie renderował. 35 00:02:22,510 --> 00:02:24,170 Nie zarządzamy tym stanem. 36 00:02:24,190 --> 00:02:25,540 To jest zmienna regularna. 37 00:02:25,600 --> 00:02:27,040 Oczywiście możemy to zmienić. 38 00:02:27,280 --> 00:02:28,930 Oczywiście możemy użyć do zmiany wartości. 39 00:02:29,230 --> 00:02:31,480 Ale jeśli ustalimy nową wartość. 40 00:02:31,900 --> 00:02:37,150 Nie ma to odzwierciedlenia w naszych danych wejściowych, ponieważ dane wejściowe mają jedynie połączenie z programem obsługi zmiany tekstu. 41 00:02:37,480 --> 00:02:42,040 Nie wie, że powinien odzwierciedlać bieżącą wartość przechowywaną i wprowadzoną do tekstu. 42 00:02:42,850 --> 00:02:47,260 Teraz możemy powiedzieć komponentowi wejściowemu, że powinien to zrobić, wiążąc jego wartość prop. 43 00:02:47,710 --> 00:02:52,390 Możemy to powiązać z wprowadzonym tekstem i wraz z tatą informujemy element wejściowy. 44 00:02:52,600 --> 00:02:58,300 Hej, wartość wyświetlana na wejściu powinna być dewaluowana, przechowywana i wprowadzana. 45 00:02:58,330 --> 00:02:58,870 Tekst. 46 00:02:59,840 --> 00:03:02,540 Jeśli to zrobimy, poznamy coś nowego. 47 00:03:03,140 --> 00:03:07,430 Teraz nie możemy już tam pisać, jeśli piszę tutaj, dane wejściowe nie są odzwierciedlane. 48 00:03:08,000 --> 00:03:10,190 Jeśli się nad tym zastanowić, to ma sens. 49 00:03:10,660 --> 00:03:16,010 Kiedy mówisz reaktancji, że dane wejściowe powinny być renderowane w taki sposób, że wartość ma być wprowadzana, do 50 00:03:16,460 --> 00:03:21,220 tekstu za każdym naciśnięciem klawisza, który zmieniamy, wprowadź tekst, ale wpisanie tekstu nie jest stanem. 51 00:03:21,230 --> 00:03:22,400 Jest to zmienna regularna. 52 00:03:22,850 --> 00:03:28,250 Oznacza to, że zmieniamy zmienną przy każdym naciśnięciu klawisza, ale reagujemy tysiącem przepisujących składnik 53 00:03:28,250 --> 00:03:28,790 wejściowy. 54 00:03:28,880 --> 00:03:34,910 Nie odzwierciedla zaktualizowanej wartości do reagowania, zawsze dewaluuje jako pusty ciąg, ponieważ był to ostatni raz, 55 00:03:34,910 --> 00:03:40,460 gdy renderował ten komponent i kod X rozładowania Delforda, a zatem jako dane wejściowe. 56 00:03:41,180 --> 00:03:46,220 Musimy więc zareagować, że jest to jakiś stan i że kiedy się zmieni, powinien ponownie renderować nasz J 57 00:03:46,220 --> 00:03:47,090 jako kod X. 58 00:03:47,990 --> 00:03:54,890 Więc znowu możemy zaimportować cię jako stan tutaj i przekonwertować enter na tekst, używając już struktury tutaj, a 59 00:03:54,890 --> 00:04:00,080 ty stan to początkowo pusty ciąg lub początkowo pusty ciąg tutaj, ponieważ zarządzam 60 00:04:00,080 --> 00:04:01,030 wprowadzonym tekstem. 61 00:04:01,370 --> 00:04:06,250 Drugim elementem jest funkcja aktualizacji stanu, która wywoła zestaw wprowadzonego tekstu. 62 00:04:07,400 --> 00:04:14,690 A teraz tutaj, przy każdym naciśnięciu klawisza, ustawiałem wprowadzony tekst, aby dewaluować wartość celu zdarzenia. 63 00:04:15,050 --> 00:04:20,240 I tutaj nie potrzebujemy tej funkcji funkcji aktualizacji stanu, ponieważ mamy zupełnie nową wartość, która 64 00:04:20,240 --> 00:04:22,160 nie zależy od poprzedniego stanu. 65 00:04:22,430 --> 00:04:25,010 Możemy więc po prostu zaktualizować, aby ustawić w ten sposób. 66 00:04:25,940 --> 00:04:27,410 A teraz to zrobi. 67 00:04:28,880 --> 00:04:35,330 Renderuj ten komponent za każdym razem, gdy piszemy, za każdym razem, gdy wywołujemy set, wpisujemy ciągle przy każdym naciśnięciu klawisza, co 68 00:04:35,360 --> 00:04:37,010 brzmi okropnie, ale jest świetne. 69 00:04:37,130 --> 00:04:37,550 Reagować. 70 00:04:37,550 --> 00:04:43,850 Zrobimy to w bardzo wydajny sposób, dlatego ta ostatnia wartość zostanie odzwierciedlona w elemencie wejściowym. 71 00:04:44,480 --> 00:04:51,230 I tutaj, w ADCO Handler, jeśli chcemy zaktualizować, wprowadzić, wysłać SMS-a i zresetować go, możemy odrzucić, ustawić, wprowadzić tekst i ustawić 72 00:04:51,440 --> 00:04:53,570 go z powrotem na pusty ciąg. 73 00:04:54,280 --> 00:04:56,960 I dzięki temu mamy teraz to, co najlepsze z obu światów. 74 00:04:56,990 --> 00:04:59,300 Możemy wprowadzić tutaj coś, co wszystko działa. 75 00:04:59,570 --> 00:05:05,690 Ale możemy również nim manipulować i resetować po dodaniu nowego celu takiego jak ten. 76 00:05:06,590 --> 00:05:09,980 Tak jest teraz i nigdy nie używaj przypadku do zarządzania stanem. 77 00:05:10,100 --> 00:05:13,340 Oczywiście w naszej aplikacji REACT jest wiele przypadków użycia. 78 00:05:13,940 --> 00:05:20,840 I tutaj używamy zarządzania stanem, aby stworzyć coś, co jest również czasami nazywane wiązaniem drogowym, w którym 79 00:05:21,290 --> 00:05:27,020 wiąże wartość wejściową i przy każdym naciśnięciu klawisza aktualizujemy do wartości, którą następnie łączymy 80 00:05:27,020 --> 00:05:32,660 z powrotem z danymi wejściowymi, aby zawsze odzwierciedlać ostatnia wartość w danych wejściowych. 81 00:05:32,990 --> 00:05:36,560 Ale jesteśmy w stanie poradzić sobie z tym w sposób kontrolowany przez państwo. 82 00:05:36,770 --> 00:05:42,350 Czy więc wszyscy mamy szansę manipulować wartością z naszego kodu tutaj i odzwierciedlić to z powrotem w danych 83 00:05:42,620 --> 00:05:43,910 wejściowych w tym przypadku? 84 00:05:45,090 --> 00:05:50,550 Dzięki temu mamy inny scenariusz zarządzania państwem i możemy teraz dodawać własne cele.