Kontynuujmy pracę nad tym i zmieńmy to na powiedzmy funkcję obsługi zmiany tekstu, którą
teraz przypisaliśmy
do tekstu onChange tutaj w tytule, ale którą możemy również dodać do naszego imageUrl.
Więc tutaj dla tekstu onChange, ustawiłem to również na procedurę zmiany tekstu i teraz, aby to
działało, musimy upewnić się, że ta funkcja otrzymuje informacje o tym, dla którego
wejścia została uruchomiona, więc czy wpisałeś tytuł, czy Wejście imageUrl.
Więc poza otrzymaniem tekstu, spodziewam się również innego argumentu, spodziewam się
uzyskać mój identyfikator wejściowy lub coś w tym rodzaju, możesz nazwać go, jak chcesz, aby ta funkcja
mogła być ponownie użyta do wielokrotnego wprowadzania tekstu i nadal otrzymujemy informacje o tym, które
dane wejściowe
uruchomiły to, abyśmy mogli przekazać to do naszego reduktora, gdzie później będziemy potrzebować tych informacji, aby
poprawnie zaktualizować nasz stan.
Teraz, aby uzyskać tę funkcjonalność identyfikatora wejściowego, musimy udać się do miejsc, w których korzystamy z procedury
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
mnie to nie obchodzi, ale więcej co ważne, aby skonfigurować argumenty, funkcja ta dostanie i
tam jest jeden specjalny argument, który chcę przekazać i to jest identyfikator wejściowy.
I dla tej funkcji tutaj, dla tego wywołania funkcji
przy wprowadzaniu tekstu, oczywiście będzie to tytuł. Dla tych danych wejściowych związalibyśmy ten imageUrl i
znowu powinien to być identyfikator, który masz również w swoim stanie tam,
w swojej formie, który przekazujesz do reduktora. Po dodaniu tego upewnimy się, że procedura zmiany tekstu jest wykonywana
i otrzyma ten argument identyfikatora wejściowego.
Zostanie również odebrany argument tekstowy, ponieważ jest to domyślny argument, który React Native
i tak by nam przekazał, a następnie zostanie on automatycznie odebrany jako ostatni argument w tej funkcji.
Więc nie musimy i nie możemy tego tutaj
powiązać, zostanie ono automatycznie przesłane.
Teraz mamy tutaj funkcję obsługi zmiany tekstu wielokrotnego użytku i
możemy to przypisać również do innych danych wejściowych, takich jak tutaj do imageUrl, jak tutaj dla
ceny, możemy powiązać procedurę zmiany tekstu, powiązać to, a cena jest naszym identyfikatorem
tutaj i oczywiście również dla opisu, wklejamy to, a następnie łączymy z tym, a identyfikatorem jest opis.
Teraz ten sam moduł obsługi może być używany dla wszystkich danych wejściowych, ale
teraz robi jedną rzecz, sprawdza każdą wejściową długość.
To może mieć sens i tutaj
nie ma, żadne dane wejściowe nie powinny być puste, ale możesz chcieć
też innych walidacji, na przykład moja cena tutaj powinna być większa niż zero, powiedzmy,
więc zero nie jest dozwolone jako dane wejściowe. Z drugiej strony nie są to niektóre kryteria, które mają dla
mnie znaczenie w przypadku innych danych wejściowych. Później znajdziemy eleganckie rozwiązanie tego problemu, na razie
trzymajmy się tej najmniejszej wspólnej walidacji mianownika, którą możemy zastosować do wszystkich danych wejściowych, aby upewnić się, że przynajmniej nie
są puste, i skupmy się na
funkcji reduktora i na tym, jak wygląda nasz formularz powinien się zmienić
po wysłaniu tego formularza aktualizacji danych ze wszystkimi tymi danymi, ponieważ w tej
chwili nic się nie wydarzy.
Mamy tam swój stan początkowy na reduktorze, który zostanie przekazany lub zapisany w stanie formularza, ale
ten stan nigdy się nie zmieni.
Właśnie dlatego wysyłamy akcję, prawda?
Dlatego to robimy tutaj,
dlatego wysyłana jest aktualizacja danych wejściowych formularza i dlatego chcemy napisać tutaj kod w reduktorze,
gdy ta akcja dotrze do nas tutaj.
Teraz, jeśli ta akcja do nas dotrze, ostatecznie celem jest upewnienie się, że zaktualizujemy migawkę tego
stanu,
naszą migawkę bieżącego stanu odpowiednio.
Oznacza to, że na przykład będziemy potrzebować zaktualizowanych wartości i w tym celu utworzę nowy
obiekt, ponieważ tutaj
moje wartości wejściowe, to jest obiekt i utworzę nowy, aby go zastąpić, a przede
wszystkim skopiuję istniejący wartości wejściowe stanu.
Należy pamiętać, że stan tutaj jest przekazywany automatycznie, to jest nasza bieżąca migawka stanu
przed jej zaktualizowaniem, a zatem początkowo jest to na przykład migawka stanu tutaj, która będzie
miała klucz wartości wejściowych, który
z kolei przechowuje obiekt
i to po prostu Kopiuję tutaj, kopiuję wszystkie pary klucz-wartość tej migawki wartości wejściowych, a następnie chcę
zastąpić parę klucz-wartość dla danych wejściowych, dla których została wysłana ta
akcja, dobrze, że dołączamy dane wejściowe identyfikator akcji. Możemy więc przejść do reduktora
i dynamicznie zastąpić tutaj klucz w skopiowanych wartościach wejściowych,
kluczem jest działanie. dane wejściowe, to jest nasz identyfikator wejściowy, który podłączyliśmy do akcji,
a wartością powinna być akcja. wartość,
to wszystko, co musimy zrobić. Tak więc dynamicznie przechowujemy wartość, która została
wysłana z również dynamicznie przypisywanym wejściem i aktualizujemy nasze skopiowane wartości wejściowe.
Teraz możemy zwrócić nowy stan tutaj, ponieważ taki jest cel twojego własnego reduktora, tak jak w
przypadku reduktora Redux, w końcu musi on zwrócić nową migawkę stanu i
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
zostały utracone, a następnie zastępują jedną z zawartych tam par klucz-wartość. Teraz oczywiście nie chodzi tylko o
zastąpienie wartości lub zaktualizowanie wartości, chcę
również zaktualizować moje ważności.
Oto moje zaktualizowane ważności i tak jak w przypadku wartości, zacznę od skopiowania mojego klucza
poprawności danych wejściowych, ponieważ, jak widać, ważność danych wejściowych jest kluczem,
a
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
zastąpienie tego działaniem jest ważne, ponieważ otrzymujemy informację, czy jest to prawidłowe, czy
nie, jako część akcji, która jest wysyłana, prawda?
Przekazujemy to tutaj na podstawie tej podstawowej weryfikacji, którą tutaj mamy.
Teraz musimy to zaktualizować tutaj, więc nasze ważności
wejściowe są równe zaktualizowanym ważnościom, a teraz musimy tylko zarządzać ogólną
poprawnością formularza. W tym celu
dodaję zmienną, zmienną pomocniczą, forma jest poprawna, która początkowo jest prawdziwa, a następnie przeglądam wszystkie moje
zaktualizowane ważności, które są moimi
starymi skopiowanymi ważnościami, a
następnie jedną zaktualizowaną ważność dla danych wejściowych, które właśnie wpisaliśmy.
Mamy tutaj pętlę for / in, w której przechodzimy przez wszystkie klucze w zaktualizowanych terminach ważności, a cel jest
prosty, sprawdzam poprawność każdego formularza wejściowego i jeśli wszystkie poprawności wejściowe formularza są prawidłowe, jeśli wszystkie
są prawdziwe, to ogólna formularz jest ważny.
Jeśli co najmniej jeden z nich
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
formularzowi, który mamy, a następnie sprawdzamy aktualność ważności dla danych wejściowych, więc dla tego klucza i przechodzimy
przez wszystkie dane tutaj.
Sposób, w jaki działa ten operator boolowski, jest taki, że fałsz zastępuje wartość true, więc jeśli
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.
Więc jeśli co najmniej jedno dane wejściowe są niepoprawne, ogólna forma będzie
niepoprawna, a zatem nie muszę już kopiować tutaj mojego stanu, ponieważ
zastąpię całą migawkę stanu i ustawię prawidłową
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
tutaj.
Teraz jeszcze jedna dodatkowa rzecz, jeśli nie zrobimy tego
w bloku if, więc jeśli zostanie wysłana jakaś inna akcja lub coś innego, zwrócę tutaj
niezmieniony stan. Dzięki temu
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
użyć stanu formularza, który będzie się zmieniać przy każdym naciśnięciu klawisza, co dzieje się
wcześniej, ale teraz jest scentralizowane i połączyło się w jeden stan zarządzany, który moim zdaniem jest znacznie czystszy
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
wszystkimi tymi stanami stałoby się dużym problemem, gdy chcesz następnie zweryfikować ogólną ważność formularza.
Teraz możemy użyć stanu formularza, który będzie się zmieniać przy każdym naciśnięciu klawisza, i używamy
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ł.
Teraz oczywiście robimy to samo dla imageUrl, wprowadzamy to z powrotem, więc właśnie to, co zrobiliśmy
wcześniej i teraz z naszym stanem formularza zarządzanym za
pomocą reduktora, to samo dla ceny oczywiście, a także to samo dla taki opis.
Teraz oprócz zmiany tutaj, musimy go również zmienić w niektórych innych miejscach, na przykład
tutaj w module obsługi przesyłania. Tam tytuł jest poprawny, to
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
jest niepoprawny, więc
sprawdzenie powinno być prawidłowe.
Oczywiście dbamy jednak o ważność wszystkich danych wejściowych, więc zamiast po prostu sprawdzać je tutaj
ręcznie, łącząc je w długą instrukcję if, możemy po prostu sprawdzić, czy formularz stanu
formularza jest poprawny, ponieważ jest to fałsz, ponieważ oznacza to, że niektóre dane wejściowe są
fałszywe i
dlatego pokazujemy ten błąd, to jest krótsza kontrola i jest to również wtedy, gdy chcemy uniknąć przesłania formularza.
Jeśli formularz zostanie przesłany, opis tytułu i imageUrl, który już nie istnieje, zamiast
tego jest to teraz stan wartości wejściowych. tytuł i tak dalej,
więc robimy
to samo tutaj dla opisu i imageUrl. Nasze wartości czerpiemy ze stanu
formularza, to samo oczywiście tutaj do tworzenia. Otrzymujemy tytuł i opis oraz imageUrl, a także oczywiście cenę,
którą wciąż przeliczam na liczbę z plusem tutaj, otrzymujemy to
wszystko z naszego stanu wartości wejściowych. Dlatego oczywiście naszą zależnością nie jest tytuł, opis, imageUrl
i tak dalej, a jedynie stan formularza. Jeśli formularz określa zmiany, które będzie przy każdym naciśnięciu
klawisza, to funkcja ta powinna zostać przebudowana i musi zostać przebudowana, ponieważ informacje
używane przez funkcję
zmieniają się za każdym naciśnięciem klawisza,
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.
Możemy również oczywiście teraz użyć tego, aby wyświetlić nasz komunikat o błędzie. Zamiast sprawdzania poprawności tytułu,
który
już nie istnieje, sprawdzamy formState. inputValidities. tytuł, jeśli to nieprawda, to chcę pokazać ten tekst.
Więc teraz,
jeśli to wszystko uratujemy, powinniśmy być w stanie to sprawdzić. Jeśli przejdziemy na naszą stronę tutaj,
początkowo widzimy ten błąd.
Jeśli zacznę pisać, zniknie, jeśli spróbuję
to przesłać, nie powiedzie się, ponieważ mam trzy puste dane wejściowe.
Jeśli jednak wprowadzę tam coś ważnego,
to zadziała. Jeśli spróbuję edytować,
spróbujmy tego na Androidzie, może pomieszać.
Więc jeśli spróbuję edytować tutaj czerwoną koszulę, mogę to dobrze przesłać,
teraz spróbujmy też
przesłać ją, jeśli jest pusta, a następnie otrzymam alert.
Działa to tak, jak powinno działać,
teraz z tym bardziej eleganckim zarządzaniem formularzami za pomocą reduktora użycia i oczywiście nie można po prostu używać
reduktora użycia podczas
pracy z formularzami, jest to szczególnie dobry przykład, kiedy sensowne jest scalenie wiele stanów
razem i dlatego mają kod wielokrotnego użytku i wydajny.
Teraz jeszcze się nie skończyłem, ponieważ wszystkie te powtórzenia kodu z danymi wejściowymi, które są
zawsze ustrukturyzowane w ten sam sposób i brakiem możliwości dostosowywania w zakresie sprawdzania poprawności, to są rzeczy,
które chcę rozwiązać później.