Reakcja państwa jest kluczową koncepcją.
Dzięki naszej wiedzy na temat stanu możemy teraz upewnić się, że nie tworzymy po prostu fałszywego celu,
ale w rzeczywistości odzwierciedlamy rzeczywisty wkład użytkowników.
W tym celu wróćmy do nowego celu.
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
użytkownika, a następnie przekazali tę wprowadzoną wartość do rekwizytów w celu reklamy lub do naszego nowego celu tutaj zamiast
ten zaszyfrowany tekst manekina, który mamy w tej chwili.
Więc proszę bardzo.
Chcę uchwycić dane wprowadzone tutaj przez użytkownika i wysłać je zamiast mojego ciężkiego przejścia do tekstu tutaj w ramach nowego
celu.
Więc możemy tutaj utworzyć zmienną, wprowadzoną przez użytkownika lub wprowadzony tekst, który początkowo jest pustym ciągiem.
I tutaj, na wejściu, faktycznie są ustawione na zdarzenie zmiany.
Możemy słuchać, który jest uruchamiany i każde naciśnięcie klawisza.
Teraz możemy dodać funkcję.
Program do zmiany tekstu.
Tam otrzymamy obiekt zdarzenia, który będzie zawierał dane wejściowe użytkownika dotyczące zdarzenia.
Cel, który odnosi się do elementu wejściowego, wartości kropki, a zatem moglibyśmy ustawić wprowadzanie tekstu na tym samym
poziomie.
Teraz wprowadzanie tekstu będzie się zmieniać za każdym naciśnięciem klawisza.
Po powiązaniu zmiany z programem obsługi zmiany tekstu, takim jak ten.
Teraz, tutaj w nowym celu, możemy użyć wpisywania tekstu.
Co użytkownik wpisał tutaj?
A potem, zamknijmy całą konsolę i idź tutaj, abyśmy mogli zobaczyć, że to działa, jeśli teraz
będziemy mieć zabezpieczenia i przejdę tutaj test i kliknę na cel.
Widzimy, że to działa i jest tutaj wyprowadzane.
Takie podejście jest ogólnie w porządku, ale może mieć jedną drobną wadę.
Co jeśli chcemy to zresetować po dodaniu nowego celu?
Oczywiście możemy iść do naszego.
Program do obsługi reklam.
Po stworzeniu nowego celu możemy oczywiście ustawić wprowadzanie tekstu z powrotem na pusty ciąg.
Ale oczywiście nic to nie da.
Widzę, że jeśli osiągnąłem jego cel, nie ma to tutaj odzwierciedlenia.
Dlaczego nie jest odzwierciedlone?
Ponieważ nowy złoty składnik się nie renderował.
Nie zarządzamy tym stanem.
To jest zmienna regularna.
Oczywiście możemy to zmienić.
Oczywiście możemy użyć do zmiany wartości.
Ale jeśli ustalimy nową wartość.
Nie ma to odzwierciedlenia w naszych danych wejściowych, ponieważ dane wejściowe mają jedynie połączenie z programem obsługi zmiany tekstu.
Nie wie, że powinien odzwierciedlać bieżącą wartość przechowywaną i wprowadzoną do tekstu.
Teraz możemy powiedzieć komponentowi wejściowemu, że powinien to zrobić, wiążąc jego wartość prop.
Możemy to powiązać z wprowadzonym tekstem i wraz z tatą informujemy element wejściowy.
Hej, wartość wyświetlana na wejściu powinna być dewaluowana, przechowywana i wprowadzana.
Tekst.
Jeśli to zrobimy, poznamy coś nowego.
Teraz nie możemy już tam pisać, jeśli piszę tutaj, dane wejściowe nie są odzwierciedlane.
Jeśli się nad tym zastanowić, to ma sens.
Kiedy mówisz reaktancji, że dane wejściowe powinny być renderowane w taki sposób, że wartość ma być wprowadzana, do
tekstu za każdym naciśnięciem klawisza, który zmieniamy, wprowadź tekst, ale wpisanie tekstu nie jest stanem.
Jest to zmienna regularna.
Oznacza to, że zmieniamy zmienną przy każdym naciśnięciu klawisza, ale reagujemy tysiącem przepisujących składnik
wejściowy.
Nie odzwierciedla zaktualizowanej wartości do reagowania, zawsze dewaluuje jako pusty ciąg, ponieważ był to ostatni raz,
gdy renderował ten komponent i kod X rozładowania Delforda, a zatem jako dane wejściowe.
Musimy więc zareagować, że jest to jakiś stan i że kiedy się zmieni, powinien ponownie renderować nasz J
jako kod X.
Więc znowu możemy zaimportować cię jako stan tutaj i przekonwertować enter na tekst, używając już struktury tutaj, a
ty stan to początkowo pusty ciąg lub początkowo pusty ciąg tutaj, ponieważ zarządzam
wprowadzonym tekstem.
Drugim elementem jest funkcja aktualizacji stanu, która wywoła zestaw wprowadzonego tekstu.
A teraz tutaj, przy każdym naciśnięciu klawisza, ustawiałem wprowadzony tekst, aby dewaluować wartość celu zdarzenia.
I tutaj nie potrzebujemy tej funkcji funkcji aktualizacji stanu, ponieważ mamy zupełnie nową wartość, która
nie zależy od poprzedniego stanu.
Możemy więc po prostu zaktualizować, aby ustawić w ten sposób.
A teraz to zrobi.
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
brzmi okropnie, ale jest świetne.
Reagować.
Zrobimy to w bardzo wydajny sposób, dlatego ta ostatnia wartość zostanie odzwierciedlona w elemencie wejściowym.
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ć
go z powrotem na pusty ciąg.
I dzięki temu mamy teraz to, co najlepsze z obu światów.
Możemy wprowadzić tutaj coś, co wszystko działa.
Ale możemy również nim manipulować i resetować po dodaniu nowego celu takiego jak ten.
Tak jest teraz i nigdy nie używaj przypadku do zarządzania stanem.
Oczywiście w naszej aplikacji REACT jest wiele przypadków użycia.
I tutaj używamy zarządzania stanem, aby stworzyć coś, co jest również czasami nazywane wiązaniem drogowym, w którym
wiąże wartość wejściową i przy każdym naciśnięciu klawisza aktualizujemy do wartości, którą następnie łączymy
z powrotem z danymi wejściowymi, aby zawsze odzwierciedlać ostatnia wartość w danych wejściowych.
Ale jesteśmy w stanie poradzić sobie z tym w sposób kontrolowany przez państwo.
Czy więc wszyscy mamy szansę manipulować wartością z naszego kodu tutaj i odzwierciedlić to z powrotem w danych
wejściowych w tym przypadku?
Dzięki temu mamy inny scenariusz zarządzania państwem i możemy teraz dodawać własne cele.