Teraz, aby zweryfikować to, co
wprowadził użytkownik, oczywiście chcę coś zrobić przy każdym naciśnięciu klawisza.
Teraz mamy już na przykład onChangeText jako słuchacz tytułu, a
teraz robimy to, ustawiając tytuł w naszym stanie.
Następnym krokiem jest nie tylko zrobienie tego,
aby nie tylko zapisać dane wejściowe, ale także je zweryfikować, a także w pewien sposób zarządzać ważnością danych
wejściowych w stanie.
Dlatego dodam tutaj nową funkcję, na przykład procedurę zmiany tytułu, która pobiera wprowadzony tekst, a następnie może coś zrobić i po prostu zlecę
tę funkcję osobnej nazwie o nazwie, aby mieć nieco czystszy i łatwiejszy
do naśladowania wzdłuż kodu, ponieważ teraz powiążę tutaj nasłuchiwanie z moim zdarzeniem onChangeText, aby ta funkcja
była uruchamiana przy każdym naciśnięciu klawisza i tam oczywiście nadal ustawię tytuł z tekstem, ale
teraz,
jak już powiedziałem, chcę zarządzać ważność i do tego
możemy dodać kolejny stan, którym chcemy zarządzać.
Może więc tutaj, po zarządzeniu wartością tytułu, możemy również mieć status prawidłowego stanu lub jakkolwiek chcesz
go nazwać i dodać ustawiony tytuł jest ważny tutaj jako funkcja ustawiająca,
a następnie ten stan tutaj
może być początkowo fałszywy, abyśmy początkowo traktowali to nieważne. Teraz za każdym naciśnięciem klawisza tutaj w module obsługi zmiany tytułu,
zanim będziemy mogli to zapisać i zaktualizować nasz stan tytułu, możemy to oczywiście zweryfikować i teraz
to od Ciebie zależy, jak chcesz to sprawdzić.
Teraz możesz na przykład powiedzieć, że jest to poprawne tylko wtedy, gdy masz tekst, który nie jest pusty, więc jeśli długość tekstu jest
większa od zera. Tekst jest oczywiście ciągiem,
więc jeśli długość wynosi zero, oznacza to, że jest to ciąg pusty.
Możemy również zadzwonić na SMS. przycinanie w celu przycinania nadmiaru białych znaków, tak aby tylko kilka białych znaków
również nie było traktowane jako prawidłowe.
Oczywiście możesz również dodać sprawdzanie długości minimalnej lub maksymalnej, sprawdzając długość tutaj, możesz dodać sprawdzanie poprawności
wyrażeń regularnych, aby sprawdzić tekst pod kątem określonych wzorców, i tak naprawdę zrobimy to
później, ale na początek, zrobię to
po prostu sprawdź to w ten sposób, a
teraz tutaj, jeśli jesteśmy większe od zera, nic nam nie
jest, ale tak naprawdę, jeśli mamy długość zero, nie mamy się dobrze.
Więc tutaj chcę ustawić
tytuł jest prawidłowy na false, w przeciwnym razie ustawimy tytuł jest ważny oczywiście
na
prawda, więc jeśli mamy prawidłowe dane wejściowe
i zawsze ustawiamy sam tytuł, zawsze musimy to zapisać, nigdy nie możemy utracić
danych wprowadzonych przez użytkownika, w
przeciwnym razie psujemy aplikację.
A teraz, gdy ważność tytułu jest zapisana w stanie, możemy go oczywiście użyć tutaj w naszym
kodzie jsx, aby sprawdzić, czy tytuł nie jest poprawny, na przykład, a jeśli tak,
możemy dynamicznie wyprowadzić tekst tutaj, na przykład powiedzieć wpisz poprawny tytuł, aby wyświetlić mały komunikat o błędzie,
do którego możesz oczywiście przypisać styl.
Teraz widzicie, że jeśli przejdziemy do naszych danych wejściowych tutaj, zobaczymy, że komunikat o
błędzie od samego początku, ponieważ zaczynamy w niepoprawnym stanie i jeśli zaczniemy pisać,
to znika, ale jeśli usunę wszystkie dane wejściowe, pojawi się ponownie i to jest podstawowe sprawdzanie poprawności, które możesz
dodać, aby wyświetlać użytkownikowi komunikat o błędzie lub podpowiedź, aby upewnić się, że użytkownicy przynajmniej wiedzą,
jakiego rodzaju danych wejściowych chcesz.
Teraz możesz oczywiście nie tylko użyć tej ważności do wyświetlania komunikatów o błędach, ale także
uniknąć przesłania formularza, jeśli jest nieprawidłowy.
Tak więc tutaj w module obsługi przesyłania, w którym zawsze przesyłam swoje dane i tworzę lub aktualizuję produkt, bez względu na to,
czy dane wejściowe są prawidłowe, tam możemy użyć zebranych danych dotyczących ważności
i na przykład sprawdzić, czy tytuł jest ważny, a jeśli nie jest ważne, stąd wykrzyknik,
a następnie po prostu
wrócimy, co oznacza,
że anulujemy wykonanie funkcji, a następnie kod nie będzie działał, a ponadto możemy nie tylko
chcieć wrócić, oczywiście możemy również zaimportować alert
z React Native i rzucić fajny natywny alert tutaj. Możemy więc po prostu pokazać alert
z komunikatem o niewłaściwym wprowadzeniu lub jego tytule oraz komunikat o błędzie, proszę sprawdzić błędy w formularzu, a następnie po prostu dodać jeden przycisk
tam, gdzie mówimy „OK”, ponieważ nie ma nic więcej do zrobienia, aby potwierdzić, cóż, dzięki temu
mamy tutaj
niezły przepływ informacji, w którym ostrzegamy użytkownika, że dane wejściowe są nieprawidłowe.
Na przykład teraz, jeśli spróbuję przesłać te dane wejściowe z moim nieprawidłowym tytułem, dostaję ten błąd i
tylko jeśli wprowadzę prawidłowy tytuł, mogę go przesłać, ponieważ nie dodałem jeszcze weryfikacji dla innych danych
wejściowych, które oczywiście powinniśmy .
W ten sposób możesz łatwo rozpocząć walidację.
Teraz, odkąd użyliśmy tutaj Javascript, możesz oczywiście również wprowadzić inne biblioteki sprawdzania poprawności innych firm, takie jak na przykład
ValidateJS, który jest pakietem, który możesz zainstalować w swoim projekcie i zacząć z niego korzystać, aby w razie potrzeby łatwo
zweryfikować ciągi znaków dla określonych wzorców aby to zrobić. W tym module napiszę podstawowe
wzorce, których używamy ręcznie, abyś dobrze zrozumiał, co się tam naprawdę dzieje,
ale możesz także absolutnie wprowadzić biblioteki innych firm.
Cóż, teraz, gdy mamy podstawową wiedzę na temat sprawdzania poprawności i tak dalej, upewnijmy
się, że teraz faktycznie przechodzimy również w kierunku zarządzania formularzami i danymi wejściowymi, które są bardziej skalowalne
i nie obejmują wielu stanów, którymi musimy zarządzać ręcznie.