1 00:00:02,380 --> 00:00:04,460 Teraz, aby zweryfikować to, co 2 00:00:04,480 --> 00:00:07,680 wprowadził użytkownik, oczywiście chcę coś zrobić przy każdym naciśnięciu klawisza. 3 00:00:07,690 --> 00:00:11,740 Teraz mamy już na przykład onChangeText jako słuchacz tytułu, a 4 00:00:11,740 --> 00:00:15,700 teraz robimy to, ustawiając tytuł w naszym stanie. 5 00:00:15,790 --> 00:00:18,700 Następnym krokiem jest nie tylko zrobienie tego, 6 00:00:18,700 --> 00:00:25,270 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 7 00:00:25,510 --> 00:00:26,780 wejściowych w stanie. 8 00:00:26,860 --> 00:00:36,620 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ę 9 00:00:36,620 --> 00:00:41,870 tę funkcję osobnej nazwie o nazwie, aby mieć nieco czystszy i łatwiejszy 10 00:00:41,870 --> 00:00:48,830 do naśladowania wzdłuż kodu, ponieważ teraz powiążę tutaj nasłuchiwanie z moim zdarzeniem onChangeText, aby ta funkcja 11 00:00:48,830 --> 00:00:55,610 była uruchamiana przy każdym naciśnięciu klawisza i tam oczywiście nadal ustawię tytuł z tekstem, ale 12 00:00:55,610 --> 00:00:56,290 teraz, 13 00:00:56,300 --> 00:01:00,220 jak już powiedziałem, chcę zarządzać ważność i do tego 14 00:01:00,230 --> 00:01:03,590 możemy dodać kolejny stan, którym chcemy zarządzać. 15 00:01:03,590 --> 00:01:10,580 Może więc tutaj, po zarządzeniu wartością tytułu, możemy również mieć status prawidłowego stanu lub jakkolwiek chcesz 16 00:01:10,580 --> 00:01:16,100 go nazwać i dodać ustawiony tytuł jest ważny tutaj jako funkcja ustawiająca, 17 00:01:16,280 --> 00:01:18,780 a następnie ten stan tutaj 18 00:01:18,800 --> 00:01:27,000 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, 19 00:01:27,630 --> 00:01:33,180 zanim będziemy mogli to zapisać i zaktualizować nasz stan tytułu, możemy to oczywiście zweryfikować i teraz 20 00:01:33,210 --> 00:01:36,320 to od Ciebie zależy, jak chcesz to sprawdzić. 21 00:01:36,390 --> 00:01:45,130 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 22 00:01:45,130 --> 00:01:47,990 większa od zera. Tekst jest oczywiście ciągiem, 23 00:01:48,000 --> 00:01:51,650 więc jeśli długość wynosi zero, oznacza to, że jest to ciąg pusty. 24 00:01:51,660 --> 00:01:58,920 Możemy również zadzwonić na SMS. przycinanie w celu przycinania nadmiaru białych znaków, tak aby tylko kilka białych znaków 25 00:01:58,920 --> 00:02:00,630 również nie było traktowane jako prawidłowe. 26 00:02:00,660 --> 00:02:05,760 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 27 00:02:05,790 --> 00:02:10,420 wyrażeń regularnych, aby sprawdzić tekst pod kątem określonych wzorców, i tak naprawdę zrobimy to 28 00:02:10,440 --> 00:02:12,820 później, ale na początek, zrobię to 29 00:02:13,170 --> 00:02:15,620 po prostu sprawdź to w ten sposób, a 30 00:02:16,110 --> 00:02:19,490 teraz tutaj, jeśli jesteśmy większe od zera, nic nam nie 31 00:02:19,500 --> 00:02:23,550 jest, ale tak naprawdę, jeśli mamy długość zero, nie mamy się dobrze. 32 00:02:23,550 --> 00:02:25,100 Więc tutaj chcę ustawić 33 00:02:25,320 --> 00:02:30,870 tytuł jest prawidłowy na false, w przeciwnym razie ustawimy tytuł jest ważny oczywiście 34 00:02:30,880 --> 00:02:31,810 na 35 00:02:31,810 --> 00:02:34,810 prawda, więc jeśli mamy prawidłowe dane wejściowe 36 00:02:34,810 --> 00:02:40,420 i zawsze ustawiamy sam tytuł, zawsze musimy to zapisać, nigdy nie możemy utracić 37 00:02:40,420 --> 00:02:42,580 danych wprowadzonych przez użytkownika, w 38 00:02:42,580 --> 00:02:44,410 przeciwnym razie psujemy aplikację. 39 00:02:44,410 --> 00:02:50,890 A teraz, gdy ważność tytułu jest zapisana w stanie, możemy go oczywiście użyć tutaj w naszym 40 00:02:50,890 --> 00:02:56,980 kodzie jsx, aby sprawdzić, czy tytuł nie jest poprawny, na przykład, a jeśli tak, 41 00:02:56,980 --> 00:03:04,000 możemy dynamicznie wyprowadzić tekst tutaj, na przykład powiedzieć wpisz poprawny tytuł, aby wyświetlić mały komunikat o błędzie, 42 00:03:04,000 --> 00:03:06,670 do którego możesz oczywiście przypisać styl. 43 00:03:06,700 --> 00:03:11,530 Teraz widzicie, że jeśli przejdziemy do naszych danych wejściowych tutaj, zobaczymy, że komunikat o 44 00:03:11,560 --> 00:03:15,900 błędzie od samego początku, ponieważ zaczynamy w niepoprawnym stanie i jeśli zaczniemy pisać, 45 00:03:15,910 --> 00:03:22,330 to znika, ale jeśli usunę wszystkie dane wejściowe, pojawi się ponownie i to jest podstawowe sprawdzanie poprawności, które możesz 46 00:03:22,390 --> 00:03:27,910 dodać, aby wyświetlać użytkownikowi komunikat o błędzie lub podpowiedź, aby upewnić się, że użytkownicy przynajmniej wiedzą, 47 00:03:27,910 --> 00:03:29,790 jakiego rodzaju danych wejściowych chcesz. 48 00:03:29,800 --> 00:03:36,700 Teraz możesz oczywiście nie tylko użyć tej ważności do wyświetlania komunikatów o błędach, ale także 49 00:03:36,700 --> 00:03:39,780 uniknąć przesłania formularza, jeśli jest nieprawidłowy. 50 00:03:39,820 --> 00:03:47,230 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, 51 00:03:47,230 --> 00:03:51,190 czy dane wejściowe są prawidłowe, tam możemy użyć zebranych danych dotyczących ważności 52 00:03:51,190 --> 00:03:56,530 i na przykład sprawdzić, czy tytuł jest ważny, a jeśli nie jest ważne, stąd wykrzyknik, 53 00:03:56,550 --> 00:03:58,000 a następnie po prostu 54 00:03:58,060 --> 00:03:59,500 wrócimy, co oznacza, 55 00:03:59,500 --> 00:04:04,770 że anulujemy wykonanie funkcji, a następnie kod nie będzie działał, a ponadto możemy nie tylko 56 00:04:04,850 --> 00:04:07,490 chcieć wrócić, oczywiście możemy również zaimportować alert 57 00:04:07,510 --> 00:04:13,630 z React Native i rzucić fajny natywny alert tutaj. Możemy więc po prostu pokazać alert 58 00:04:13,630 --> 00:04:24,520 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 59 00:04:25,090 --> 00:04:32,620 tam, gdzie mówimy „OK”, ponieważ nie ma nic więcej do zrobienia, aby potwierdzić, cóż, dzięki temu 60 00:04:32,620 --> 00:04:33,870 mamy tutaj 61 00:04:34,180 --> 00:04:39,760 niezły przepływ informacji, w którym ostrzegamy użytkownika, że dane wejściowe są nieprawidłowe. 62 00:04:39,760 --> 00:04:45,570 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 63 00:04:45,580 --> 00:04:51,250 tylko jeśli wprowadzę prawidłowy tytuł, mogę go przesłać, ponieważ nie dodałem jeszcze weryfikacji dla innych danych 64 00:04:51,250 --> 00:04:53,140 wejściowych, które oczywiście powinniśmy . 65 00:04:53,140 --> 00:04:56,410 W ten sposób możesz łatwo rozpocząć walidację. 66 00:04:56,440 --> 00:05:02,260 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 67 00:05:02,950 --> 00:05:09,250 ValidateJS, który jest pakietem, który możesz zainstalować w swoim projekcie i zacząć z niego korzystać, aby w razie potrzeby łatwo 68 00:05:09,250 --> 00:05:15,310 zweryfikować ciągi znaków dla określonych wzorców aby to zrobić. W tym module napiszę podstawowe 69 00:05:15,310 --> 00:05:21,760 wzorce, których używamy ręcznie, abyś dobrze zrozumiał, co się tam naprawdę dzieje, 70 00:05:21,790 --> 00:05:26,370 ale możesz także absolutnie wprowadzić biblioteki innych firm. 71 00:05:26,380 --> 00:05:31,850 Cóż, teraz, gdy mamy podstawową wiedzę na temat sprawdzania poprawności i tak dalej, upewnijmy 72 00:05:31,990 --> 00:05:38,530 się, że teraz faktycznie przechodzimy również w kierunku zarządzania formularzami i danymi wejściowymi, które są bardziej skalowalne 73 00:05:38,620 --> 00:05:42,550 i nie obejmują wielu stanów, którymi musimy zarządzać ręcznie.