Formularze w React Native: pola, walidacja i klawiatura
Przewodnik po formularzach i walidacji w React Native
Formularze w React Native: kontrolowane pola i walidacja | We.Inc
Zbuduj formularz w React Native z kontrolowanymi TextInput, jedną funkcją walidacji, komunikatami błędów pod każdym polem i obsługą klawiatury. Wypróbuj walidację na żywo w przeglądarce.
Niezawodny formularz w React Native potrzebuje trzech elementów: pól TextInput kontrolowanych przez stan, jednej funkcji validate, która zwraca błąd dla każdego pola, oraz obsługi klawiatury. Pokazuj każdy komunikat, gdy użytkownik opuści dane pole lub naciśnie przycisk wysyłania. Owiń ekran w KeyboardAvoidingView i ustaw keyboardShouldPersistTaps="handled" na ScrollView, aby przycisk wysyłania pozostał dostępny.
Elementy formularza w React Native
Zadanie
Narzędzie
Przechowywanie wartości
useState z jednym obiektem albo jeden hook na pole
Sprawdzanie wartości
Czysta funkcja validate(values) zwracająca obiekt błędów
Pokazywanie błędów
Text pod każdym polem, powiązany przez accessibilityLabel lub live region
Utrzymanie widoczności pól
KeyboardAvoidingView z behavior="padding" na iOS
Naciśnięcie wysyłania przy otwartej klawiaturze
keyboardShouldPersistTaps="handled" na ScrollView
Przechodzenie między polami
returnKeyType="next" i focus() na następnym ref
Reguły walidacji na tej stronie to zwykły JavaScript, więc podgląd poniżej uruchamia dokładnie tę funkcję, którą wkleisz do swojego ekranu w React Native. Wypełnij pola, opuść je i naciśnij Utwórz konto, aby zobaczyć, jak każdy komunikat się pojawia i znika.
Każde pole zapisuje dane do jednego obiektu values przez onChangeText.
onBlur oznacza pole jako dotknięte, więc jego błąd może się pokazać bez krzyczenia na kogoś w trakcie pisania.
validate(values) uruchamia się przy każdym renderze i zwraca obiekt z komunikatem dla każdej złamanej reguły.
Wysłanie oznacza wszystkie pola jako dotknięte i zatrzymuje się, jeśli obiekt błędów ma jakiekolwiek klucze.
Gdy nie ma już błędów, handler wysyła wartości i może wywołać Keyboard.dismiss().
Trzymaj validate jako czystą funkcję, aby móc ją testować bez renderowania czegokolwiek i ponownie użyć na serwerze.
Nie wyłączaj przycisku wysyłania, gdy formularz jest niepoprawny; to właśnie jego naciśnięcie pokazuje wielu osobom, czego brakuje.
Umieszczaj tekst błędu tuż pod jego polem, słowami, które mówią, jak naprawić problem.
Przed sprawdzeniem adresów e-mail usuwaj z nich białe znaki; wklejona spacja na końcu to najczęstszy fałszywy błąd.
Sprawdzaj wszystko ponownie na serwerze. Reguły po stronie klienta prowadzą użytkowników, ale nie można im ufać.
Najczęściej zadawane pytania
Czy potrzebuję biblioteki formularzy w React Native?
Nie. Kilka pól dobrze działa z useState i funkcją validate, taką jak ta na tej stronie. Biblioteki pomagają, gdy formularz ma wiele pól, zagnieżdżone tablice lub asynchroniczne sprawdzenia, a React Hook Form opisuje siebie jako działający w przeglądarce i w React Native.
Jak sprawić, by klawiatura nie zasłaniała pól?
Owiń formularz w KeyboardAvoidingView. Zmienia on swoją wysokość, pozycję lub dolny padding, dopasowując się do klawiatury; behavior="padding" to częsty wybór na iOS. keyboardVerticalOffset uwzględnia nagłówek nad widokiem i domyślnie wynosi 0.
Dlaczego przycisk wysyłania wymaga dwóch dotknięć?
keyboardShouldPersistTaps w ScrollView domyślnie ma wartość "never", więc pierwsze dotknięcie tylko zamyka klawiaturę. Ustaw "handled", a przycisk od razu otrzyma dotknięcie.
Jak zamknąć klawiaturę po wysłaniu?
Wywołaj Keyboard.dismiss(), które według dokumentacji zamyka aktywną klawiaturę i usuwa fokus.
Kiedy pokazywać błąd
Pokazywanie każdej reguły na czerwono w chwili otwarcia ekranu przypomina reprymendę. Śledź, których pól ktoś dotknął, i ujawniaj komunikat dopiero po opuszczeniu pola albo po próbie wysłania.
Gdy komunikat jest już widoczny, uruchamiaj sprawdzenie przy każdym naciśnięciu klawisza, aby zniknął w chwili, gdy wartość stanie się poprawna. To natychmiastowe potwierdzenie jest nagrodą za wcześniejsze czekanie z jego pokazaniem.
Dostępne komunikaty błędów
Sama czerwona ramka nic nie mówi osobie korzystającej z czytnika ekranu ani komuś ze słabym rozróżnianiem kolorów. Opisz problem tekstem i dodaj go do accessibilityLabel pola, aby był odczytywany, gdy trafi tam fokus.
Na Androidzie accessibilityLiveRegion="polite" na Text z błędem sprawia, że TalkBack ogłasza komunikat, gdy się pojawi, bez przenoszenia fokusu.
Kod formularza do skopiowania
Funkcja validate
Zwykły JavaScript bez importów z React Native, więc działa w testach, w podglądzie w przeglądarce i na serwerze.
Ekran rejestracji z dotkniętymi polami i obsługą klawiatury
Jeden obiekt values, jeden obiekt touched i pomocniczy komponent Field, który pokazuje błąd tylko wtedy, gdy powinien.
Wpisz swoje imię.
Wpisz swój adres e-mail.
W tym adresie e-mail brakuje @ lub domeny.
Użyj co najmniej 8 znaków.
Hasła nie są takie same.
Podgląd walidacji
Sprawdzenia uruchamiają funkcję validate z kodu poniżej. Komunikaty pojawiają się po opuszczeniu pola lub naciśnięciu przycisku.
Imię
Hasło
Potwierdź hasło
Utwórz konto
Wszystkie pola są poprawne. Prawdziwa aplikacja wysłałaby teraz wartości.