Działające przykłady React Hook Form, które wypróbujesz na stronie: walidacja Zod, sprawdzanie asynchroniczne, field arrays, wieloetapowy kreator, upload plików, Controller i server actions w Next.js.
React Hook Form obsługuje formularze React przez niekontrolowane pola: wywołaj useForm, rozłóż register("name") na każdym polu i opakuj funkcję wysyłki w handleSubmit. Dodaj zodResolver, aby walidować schematem Zod. Poniższe formularze działają na tej stronie: reguły, Zod, sprawdzanie async, field arrays, kreator, upload plików i server actions.
Instalacja
Wypełnij każde demo, wyślij je z błędami, a potem je popraw. Kod obok to dokładnie to, co działa. Błędy są powiązane z polami przez aria-describedby i ogłaszane przez role="alert", więc formularze działają także z czytnikiem ekranu.
React Hook Form renderuje się rzadziej, bo pola pozostają niekontrolowane, a wartości są odczytywane przez refy. Formik trzyma każdą wartość w stanie React. Przy dużych formularzach React Hook Form jest zwykle szybszy i wymaga mniej kodu.
Zainstaluj zod i @hookform/resolvers, zdefiniuj schemat z.object i przekaż resolver: zodResolver(schema) do useForm. Jako typu formularza użyj z.infer<typeof schema>, a komunikaty błędów pochodzą ze schematu.
Wywołaj reset() w funkcji obsługi wysyłki po udanym zapisie albo przekaż nowe wartości przez reset(values). reset można też wywołać w efekcie, gdy isSubmitSuccessful zmieni się na true.
Pola HTML zwracają tekst. Zarejestruj pole z valueAsNumber: true albo użyj z.coerce.number() w schemacie Zod, aby otrzymać prawdziwą liczbę.
Tak. shadcn/ui zawiera komponent Form zbudowany na Controller z React Hook Form. Nasz przewodnik po formularzach i tabelach shadcn omawia go na przykładzie na żywo.
Części API, których będziesz używać najczęściej
register łączy pole po nazwie i przyjmuje reguły w stylu HTML. errors zawiera komunikat dla każdego pola po nieudanej wysyłce.
Jeden schemat daje reguły walidacji, komunikaty błędów i typ TypeScript. refine sprawdza dwa pola razem, a path wskazuje, które pole dostaje błąd.
Funkcja validate może zwrócić promise. Zwróć true, gdy wartość jest poprawna, lub tekst do wyświetlenia jako błąd. Połącz to z trybem onBlur, aby nie uruchamiało się przy każdym klawiszu.
useFieldArray zarządza listą wewnątrz formularza. Jako klucza używaj field.id, nigdy indeksu, aby React utrzymał każde pole przy właściwym wierszu.
Trzymaj jeden formularz dla wszystkich kroków i przed przejściem dalej wywołuj trigger z polami bieżącego kroku. Wartości z wcześniejszych kroków zostają w formularzu, więc ostatnia wysyłka zawiera wszystko.
Pole pliku rejestruje się jak każde inne; jego wartością jest FileList. Sprawdź rozmiar i typ w validate i wyślij plik przez FormData.
Pola, które nie udostępniają refa, takie jak wiele wybieraczy dat i własnych selectów, łączą się przez Controller. Przekazuje on value i onChange do Twojego komponentu.
Waliduj w przeglądarce dla szybkiej informacji zwrotnej i ponownie na serwerze, bo przeglądarkę można obejść. Wspólny schemat Zod utrzymuje obie walidacje w zgodzie; setError pokazuje problemy z serwera przy właściwym polu.
Potrzebujesz zamiast tego zwykłego formularza HTML? Zobacz,
Wysłano:
Podaj swoje imię
Podaj swój e-mail
Ten e-mail wygląda na błędny
Wysyłanie...
Wyślij
Podaj poprawny e-mail
Co najmniej 8 znaków
Hasła nie są zgodne
Hasło
Potwierdź hasło
Utwórz konto
To demo symuluje serwer krótkim opóźnieniem. Zajęte: admin, studio, hello.
Nazwa użytkownika
Wybierz nazwę użytkownika
Ta nazwa użytkownika jest zajęta
Sprawdzanie...
Zajmij
Projekt logo
Nazwa pozycji {n}
Ilość pozycji {n}
Pozycja
Usuń
Dodaj pozycję
Zapisz
Wymagane
Krok {n} z {total}
Firma
Wielkość zespołu
Plan
Wybierz
Starter
Team
Wypełnij wyróżnione pola.
Wstecz
Dalej
Zakończ
Logo (PNG lub JPG, do 2 MB; zostaje w Twojej przeglądarce)
Wybierz plik
Maks. 2 MB
Tylko PNG lub JPG
Prześlij
Co najmniej 10
Budżet:
Zacznij za darmo · Bez karty kredytowej