Jak budować formularze w React za pomocą React Hook Form

Tworzenie formularzy w aplikacji React może być skomplikowane i czasochłonne. Z pomocą biblioteki React Hook Form możesz łatwo dodawać wysokowydajne formularze do swojej aplikacji React.

React Hook Form to biblioteka do budowania formularzy w React, która upraszcza proces tworzenia złożonych i wielokrotnego użytku formularzy. Jeśli chcesz zbudować aplikację React, powinieneś nauczyć się budować formularze w React przy użyciu biblioteki React Hook Form.

Instalowanie React Hook Form

Aby zacząć korzystać z React Hook Form, musisz zainstalować go za pomocą menedżera pakietów npm lub przędzy.

Aby zainstalować React Hook Form za pomocą npm, uruchom następującą komendę w swoim terminalu:

npm install reaguj na formularz haka

Aby zainstalować React Hook Form przy użyciu przędzy, uruchom następujące polecenie:

przędza dodaje formę haka reagowania

Tworzenie formularza za pomocą React Hook Form

Aby utworzyć formularz za pomocą React Hook Form, musisz użyć

użyj formularza hak. The użyj formularza hook daje dostęp do metod i właściwości, których będziesz używać twórz i zarządzaj formularzami w swojej aplikacji React.

Oto przykład pokazujący, jak używać użyj formularza hak:

import Reagować z'reagować'
import { useForm } z„reakcja-hak-forma”;
funkcjonowaćFormularz() {
konst { zarejestruj, prześlij } = useForm();
konst onPrześlij = (dane) =>konsola.log (dane);
powrót (



'tekst' { ...rejestr("imię")} />
Prześlij</button>
 </form>
 )
}
eksportdomyślny Formularz;

Biblioteka React Hook Form korzysta z rejestr metoda rejestrowania wartości wejściowych na haku. The rejestr łączy pola wejściowe formularza z biblioteką formularzy React Hook, dzięki czemu biblioteka może śledzić i weryfikować pola wejściowe.

W powyższym bloku kodu rejestrujesz dane wejściowe o nazwie „imię”. uchwytPrześlij metoda biblioteki React Hook Form obsługuje przesyłanie formularza.

Aby obsłużyć przesyłanie formularza, przekażesz funkcję wywołania zwrotnego w dniu Prześlij do uchwytPrześlij metoda. The w dniu Prześlij otrzyma obiekt zawierający wartości wszystkich danych wejściowych formularza.

Sprawdź poprawność danych wejściowych za pomocą metody rejestru

The rejestr Metoda umożliwia skonfigurowanie reguł sprawdzania poprawności dla pól wejściowych. Aby dodać sprawdzanie poprawności do pól wejściowych, przekazujesz obiekt z regułami sprawdzania poprawności jako drugi argument metody rejestr metoda.

jak tak:

import Reagować z'reagować'
import { useForm } z„reakcja-hak-forma”;
funkcjonowaćFormularz() {
konst{ zarejestruj, prześlij } = useForm();
konst onPrześlij = (dane) =>konsola.log (dane);
powrót (



'tekst' { ...rejestr("imię", { wymagany: PRAWDA})} />
'hasło' { ...rejestr("hasło", { wymagany: PRAWDA, maksymalna długość: 10})}/>
Prześlij</button>
 </form>
 )
}
eksportdomyślny Formularz;

W tym przykładzie dodajesz regułę sprawdzania poprawności do pola wejściowego „imię” i dwie reguły sprawdzania poprawności do pola „hasło”. The wymagany reguła określa, że ​​użytkownik musi wypełnić pola wejściowe i nie może przesłać formularza, jeśli pola są puste.

The maksymalna długość reguła ustawia maksymalną liczbę liter alfabetu wartości wejściowej. Oprócz wymagany I maksymalna długość metod, możesz dodać inne reguły sprawdzania poprawności, takie jak min, maks, minimalna długość, wzór, I uprawomocnić.

minimum maksimum

The min reguła określa minimalną wartość dla pola wejściowego i maks reguła określa jego maksymalną wartość.

Możesz użyć min I maks reguły z danymi wejściowymi typu liczbowego, takie jak to:

'numer' { ...rejestr("wiek", {min: 18, maks: 35}) } />

Wartość powyższego pola wejściowego musi wynosić co najmniej 18 i nie więcej niż 35.

minimalna długość

The minimalna długość zasada jest podobna do maksymalna długość reguły, ale zamiast tego ustawia minimalną liczbę liter alfabetu:

'tekst' { ...rejestr("nazwa", { minimalna długość: 10 })}/>

W tym przykładzie reguła minLength określa, że ​​wartość wejściowa powinna mieć co najmniej 10 znaków.

wzór i potwierdź

The wzór reguła określa wzorzec wyrażenia regularnego, który musi być zgodny z wartością wejściową. The uprawomocnić rule umożliwia zdefiniowanie niestandardowej funkcji sprawdzania poprawności w celu sprawdzenia poprawności wartości wejściowej. Funkcja powinna zwrócić albo PRAWDA lub komunikat o błędzie ciągu znaków.

Na przykład:

'tekst' { ...rejestr("imię", {wzór: **/^[A-Za-z]+$/**}) } />
'numer' { ...rejestr("test", {**zweryfikuj: (wartość) => wartość <= 12** }) } />

W tym przykładzie wejście „imię” używa formatu wzór reguła. The wzór wymaga, aby wartość wejściowa zawierała tylko znaki alfabetu (wielkie i małe litery).

Wejście „testowe” wykorzystuje uprawomocnić rule, aby zdefiniować niestandardową funkcję sprawdzania poprawności, która sprawdza, czy jej wartość jest mniejsza lub równa 12.

Obsługa błędów w formularzu

Biblioteka React Hook Form zapewnia wbudowany mechanizm obsługa błędów JavaScript w swoich formach. The uchwytPrześlij funkcja, wywoływana, gdy użytkownik przesyła formularz, zwraca obietnicę, która rozwiązuje się z danymi formularza, jeśli walidacja zakończy się pomyślnie.

Jeśli jednak wystąpią jakiekolwiek błędy sprawdzania poprawności, przyrzeczenie jest odrzucane z obiektem błędu, który zawiera błędy sprawdzania poprawności.

Oto przykład obsługi błędów przy użyciu metody uchwytPrześlij funkcjonować:

import Reagować z'reagować'
import { useForm } z„reakcja-hak-forma”;
funkcjonowaćFormularz() {
konst { zarejestruj, obsługuj Prześlij, Stan formy: { błędy } } = useForm();
konst onPrześlij = (dane) =>konsola.log (dane); 
powrót (



'tekst' { ...rejestr("imię", { wymagany: PRAWDA})} />
 {błędy.imię && <Zakres>Wprowadź swoje imięZakres>}
'numer' { ...rejestr("wiek", {min: 18, maks: 35,}) } />
 {błędy.wiek?.typ „maksymalnie” && <Zakres> Jesteś za stary na tę stronęZakres>}
 {błędy.wiek?.typ „min” && <Zakres> Jesteś za młody na tę stronęZakres>}
Prześlij</button>
 </form>
 )
}
eksportdomyślny Formularz;

W tym bloku kodu plik Stan formy obiekt uzyskuje dostęp do błędów każdego pola. The błędy obiekt przechowuje błędy sprawdzania poprawności dla każdego pola wejściowego. The błędy obiekt warunkowo renderuje komunikat o błędzie dla każdego nieprawidłowego pola.

Dla imię pole wejściowe, jeśli wymagany reguła nie jest spełniona, obok pola wprowadzania pojawi się komunikat o błędzie — „Wprowadź swoje imię”. Jeżeli wartość ww wiek pole wejściowe jest poza dozwolonym zakresem, zostanie wyświetlony komunikat o błędzie.

Jeśli wartość jest mniejsza niż 18, komunikat o błędzie będzie brzmiał: „Jesteś za młody na tę witrynę”, a jeśli wartość jest większa niż 35, komunikat o błędzie będzie brzmiał „Jesteś za stary na tę witrynę”.

Teraz możesz budować niezawodne formularze w React

Tworzenie formularzy w React może być złożonym i czasochłonnym procesem. Mimo to React Hook Form upraszcza to zadanie, udostępniając łatwą w użyciu i elastyczną bibliotekę do zarządzania danymi formularzy i sprawdzania poprawności.

Z pomocą haka useForm, metody register i metody handleSubmit budowanie formularzy w React staje się bardziej wydajnym i usprawnionym procesem. Możesz tworzyć funkcjonalne formularze, co z kolei poprawia doświadczenie użytkownika i ogólną jakość aplikacji React.