Teraz, gdy ta akcja jest wysyłana, możemy przejść do reduktora i napisać tutaj kod przy zmianie danych wejściowych, a
to bardzo prosty kod.
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
tej akcji, drugą jest isValid, a to druga rzecz, którą chcę również aktualizować
przy każdym naciśnięciu klawisza, isValid dla tego wejścia, nie dla całego
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
faktycznie stracimy fokus, ponieważ oznacza to, że użytkownik jest w tej chwili wprowadzany do
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
funkcją, którą dodaję i tam wyślę
akcję. W tym
celu utworzę tutaj identyfikator akcji, rozmycie
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
użyć że w innym przypadku rozmycie danych wejściowych i jeśli tak jest, zwracam nowy stan, w którym kopiuję stary
stan, ponieważ chcę zachować wartość i jest ważny i nie zmieniam tego,
ale chcę ustawić zmieniony na prawda, więc jak najszybciej kiedy rozmazujemy wejście, jest ono traktowane jako dotknięte.
Teraz musimy tylko podłączyć tę funkcję, więc ustawię tutaj nasłuchiwanie onBlur i wskażę moduł obsługi utraconego fokusa, aby uruchomił
się, gdy dane wejściowe zostaną rozmyte.
Teraz to wszystko jest miłe i pozwoli to zarządzać stanem wewnątrz tego wejścia,
oczywiście nadal muszę przekazywać wartość i informacje, czy dane wejściowe są
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
może
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
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
w komponencie nadrzędnym możemy dodać tutaj funkcję, która nasłuchuje na końcu, która jest wyzwalana, który otrzymuje
te dwa argumenty, a następnie w elemencie nadrzędnym, więc w komponencie
ekranu możemy tam zaktualizować nasz stan. Teraz ważne jest, kiedy ten efekt powinien
działać i nie powinien działać po każdym naciśnięciu klawisza? Zamiast tego powinno się to uruchamiać za
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ę
informację tylko wtedy, gdy dotknięty stan wejściowy jest prawdziwy, ponieważ w przeciwnym razie komponent nadrzędny może nie dbać.
Więc teraz naszą zależnością jest cały stan wejściowy, ponieważ używamy wszystkich wartości, ale nadal będziemy uruchamiać
tę funkcję na komponencie nadrzędnym tylko wtedy, gdy dotknięcie jest prawdziwe, więc ten
efekt będzie działał częściej, ale przez większość czasu nic nie zrobi tak długo, jak dotknięty nie
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
i wyciągnąć przy zmianie danych wejściowych, aby w przypadku zmiany innych rekwizytów nie ponownie zastosuj ten efekt, ponieważ na wejściu
potrzebujemy zmiany, a teraz możemy dodać, że jest to zależność, a inne rzeczy, inne zmiany
w rekwizytach tego nie spowodują.
Więc teraz wywołujemy to na komponencie nadrzędnym za każdym razem, gdy zostanie to dotknięte, a następnie przekazujemy wartość
i ważność tego wejścia do komponentu nadrzędnego.
Wykorzystajmy to teraz na ekranie edycji produktu, tam na naszych danych wejściowych, takich jak na tytule, możemy dodać
prop na zmianę danych wejściowych i to jest prop, którego tutaj celuję, więc musisz poprawnie nazwać i
oczekuje się, że otrzyma funkcję jako wartość, która z kolei otrzyma dwa
argumenty po wywołaniu - wartość i ważność tego wejścia.
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
prostu zmieniam nazwę, aby była bardziej dopasowana.
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ę
ponownie użyć go dla wszystkich moich danych wejściowych, a teraz, ponieważ jestem
w składniku ekranu, będziemy mieli wiele danych wejściowych i tam , dlatego otrzymujemy nasz identyfikator, a następnie otrzymujemy wartość i
prawidłowe informacje, prawda?
Tak więc wartość wejściowa i ważność wejściowa, to jest to, co otrzymujemy, prawda,
ponieważ to, co przekazujemy tutaj z wnętrza komponentu
wejściowego, to właśnie przekazujemy
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
się to tylko wtedy, gdy dane wejściowe zostaną dotknięte przy okazji, więc gdy straci koncentrację i oczywiście jest to
tylko ograniczenie, które dodałem
tutaj, że musisz stracić koncentrację, ty może oczywiście również przejść do komponentu
wejściowego i usunąć to, jeśli zaznaczysz, aby zaktualizować ważność i wartość w komponencie
nadrzędnym dla każdego wejścia i każdego naciśnięcia klawisza. Teraz jedna dodatkowa rzecz, którą chcę zrobić, chcę
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
zmianie danych wejściowych w komponencie wejściowym i tam z drugiej strony jest to zależność tego
efektu,
więc ten efekt będzie
powtarzany za każdym razem, gdy się zmieni.
Dlatego nie powinno się to zmieniać zbyt często, aby uniknąć niepotrzebnych efektów,
dlatego tutaj musimy określić nasze zależności, a jedyną zależnością, którą mamy, jest stan formularza wysyłki, który
faktycznie nigdy się nie zmieni, więc jesteśmy
dobrzy,
to nigdy nie powinno się odbudowywać, ponieważ logika
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
tutaj, ponieważ muszę go przesłać później i ponieważ muszę uzyskać ogólną ważność formularza. Nie robię tego, ponieważ
muszę tutaj zarządzać każdym wejściem, zamiast
tego robimy to z wnętrza komponentu wejściowego. Do przesłania itd.
Nadal
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ść
początkową prop i czy powinno to
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?
Cóż, możemy sprawdzić, czy mamy edytowany produkt, a jeśli tak, to tutaj należy zmienić wartość
początkową produktu. tytuł,
w przeciwnym razie jest to pusty ciąg i powinno to być początkowo prawidłowe, więc użyj tego
wniosku tutaj, jeśli mamy
edytowany produkt, więc jeśli
tak, to z podwójnym hukiem tutaj, jeśli to prawda. Jeśli nie mamy edytowanego produktu, nie może to być początkowo
ważne,
więc przekazuję false,
co jest dobre, i tak właśnie powinno być.
Teraz możemy skopiować te dwa wiersze, również do imageUrl, tam oczywiście przekazujemy wartość adresu URL obrazu
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
i nigdy nie będzie początkowo ważna. Z drugiej strony, aby dodać opis,
możemy ponownie dodać to i tutaj wskazać na opis.
Teraz jest jedna rzecz, którą muszę naprawić w elemencie wejściowym, o której również pomyślałem, oczywiście tutaj stan
formularza nie jest już dostępny, zamiast tego mamy tutaj swój stan
wewnętrzny i nadałem mu nazwę stanu wejściowego, to jest co zwraca
mój reduktor, więc oczywiście
powinniśmy tego użyć.
Więc tutaj mamy inputState. wartość jako wartość, to takie proste
i tutaj mamy inputState. Jest ważny jako czek i to powinno być wszystko.
Teraz, jeśli uratujemy to i przyjrzymy się temu, zobaczmy, czy to działa. Jeśli tu przejdziemy, początkowo mamy wszystkie komunikaty o
błędach, co ma sens, ponieważ wszystkie są początkowo nieprawidłowe,
jeśli zacznę pisać tutaj, pojawia się błąd, nie mogę znaleźć zmiennej isValid w moim komponencie wejściowym, który musi
być w ten program obsługi, który strzela przy każdym naciśnięciu klawisza, prawdopodobnie tutaj, tak, w reduktorze oczywiście
powinienem sprawdzić działanie.
isValid, nie tylko isValid, muszę
to wyciągnąć z akcji. Więc z tą poprawką
tutaj wróćmy i spróbujmy jeszcze raz. Jeśli zacznę pisać, ta opcja zostanie
wyczyszczona, jeśli ją cofnę, mój błąd nie wraca, więc jest to
mały błąd, który musimy naprawić. W przypadku ceny 0
nie jest wtedy traktowane jako prawidłowe, jedno też nie jest, więc
sprawdzanie poprawności ma pewne problemy, ale wpisywanie
itd. Działa, ale zobaczmy, co jest teraz nie tak z sprawdzaniem poprawności.
Oczywiście sposób, w jaki działa tutaj sprawdzanie poprawności, nie używamy go.
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
to za pomocą tych specjalnych rekwizytów, które musimy ustawić. Obecnie nie jest
włączone sprawdzanie poprawności, więc uwzględniane są tylko domyślne nieprawidłowe wartości.
Więc jeśli przejdę do ekranu edycji produktu, teraz włączamy tę specjalną weryfikację, ustawiając odpowiednie rekwizyty,
na przykład tutaj w polu wprowadzania tytułu, wymagane. Na imageUrl również wymagane. Na cenę tutaj wymagana, a także
może min równa zero, więc zero jest minimalną liczbą, którą musimy wprowadzić, lub liczbą
większą
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.
Długość równy 5, aby mieć co najmniej 5 znaków. Jest jeszcze jedna dodatkowa rzecz, którą musimy zrobić tutaj
na ekranie edycji produktu, ta funkcja obsługi zmian danych wejściowych tutaj również musi być dodana do
każdego wejścia, oczywiście nie tylko do tytułu. Musimy więc dodać to do
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
danych wejściowych i zastąpić identyfikator we właściwy sposób.
Przetestujmy to, a zauważysz coś dziwnego, jeśli
wpiszesz tutaj, to zadziała, jeśli wpiszesz
w imageUrl, nie działa
poprawnie, sprawdzanie poprawności się nie aktualizuje i przynajmniej nie możesz wrócić to może utknąć.
Więc jeśli przeładujemy to z błędem polecenia lub podwójnym naciśnięciem R na Androidzie i spróbujemy tutaj
jeszcze raz, powiedzmy, że cena zauważysz, że to działa, ale dlaczego to
nie działa i tak przy okazji jeśli wypróbowałeś to na
imageUrl, tutaj to działa. Dlaczego to działa, jeśli wcześniej edytowałem inne dane wejściowe,
ponieważ teraz na przykład nie działa już w przypadku tytułu? Problem związany jest z utknięciem tutaj.
Zbyt często przekazujemy ten komponent, a jego przyczyny naprawdę trudno jest wyśledzić.
W końcu mamy tutaj coś w rodzaju
nieskończonej pętli, a problemem jest nasza procedura wprowadzania zmian.
Używamy tutaj wywołania zwrotnego, aby uniknąć niepotrzebnego odtwarzania, ale wiążąc go w ten sposób, w pewien sposób renderujemy
to przestarzałe, nie robi to teraz żadnej różnicy, ponieważ spowoduje to utworzenie nowej funkcji powiązania dla każdego
cyklu ponownego wysyłania.
Więc w końcu musimy usunąć powiązanie tutaj, usunąć je tutaj we wszystkich tych miejscach, ponieważ
spowoduje to uszkodzenie
naszej aplikacji, spowoduje zbyt wiele cykli ponownego wysyłania z powodu braku efektu
wywołania zwrotnego użycia i zamiast tego możemy chcesz przesłać
prop ID tytułu i tak dalej do naszego komponentu wejściowego.
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
prostu przekazujemy to do elementu wejściowego, abyśmy mogli go tam użyć, zróbmy to
dla wszystkich tych danych wejściowych tutaj i jak możemy tego użyć?
Cóż, wewnątrz wejścia, mamy teraz ten odpowiedni identyfikator ID, więc
możemy go po prostu dołączyć.
Więc tutaj możemy przesyłać rekwizyty. id lub po prostu ID, abyśmy nie musieli tutaj dodawać
rekwizytów i zamiast tego wyciągali tutaj ID z rekwizytów, tak jak zrobiliśmy to przy zmianie danych wejściowych
i dodawali ID jako zależność tego efektu później. A teraz nadal przekazujemy identyfikator tego wejścia,
ale w bardziej elegancki sposób, który pozwala uniknąć użycia wiązania, które w
końcu odtwarza tę funkcję dla każdego cyklu renderowania,
a zatem prowadzi do nieskończonej pętli, a zatem teraz, jeśli przeładujemy
to i przejdź do sekcji administracyjnej tutaj, teraz mogę wprowadzić coś tutaj, a także tu i teraz, to działa, ponieważ teraz unikamy
tego nieskończonego cyklu renderowania i otrzymujemy sprawdzanie poprawności tak, jak chcieliśmy.
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ć
element wejściowy wielokrotnego użytku, który wykonuje własną weryfikację, którą można skonfigurować z zewnątrz i gdzie
nadal można zarządzać ogólną formą.
Dzięki temu przejdźmy do drobnego dostrojenia,
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
kontrolowanie, kiedy go wyświetlamy, ponieważ nie chcę go cały czas pokazywać.