Cum să construiți formulare în React folosind React Hook Form

Construirea formularelor într-o aplicație React poate fi complexă și consumatoare de timp. Cu ajutorul bibliotecii React Hook Form, puteți adăuga cu ușurință formulare de înaltă performanță la aplicația dvs. React.

React Hook Form este o bibliotecă pentru construirea de formulare în React, care simplifică procesul de creare a formularelor complexe și reutilizabile. Dacă doriți să construiți o aplicație React, ar trebui să învățați cum să creați formulare în React folosind biblioteca React Hook Form.

Instalarea React Hook Form

Pentru a începe să utilizați React Hook Form, trebuie să îl instalați utilizând managerii de pachete npm sau yarn.

Pentru a instala React Hook Form folosind npm, rulați următoarea comandă în terminalul dvs.:

npm install react-hook-form

Pentru a instala React Hook Form folosind fire, rulați următoarea comandă:

fire adauga react-hook-form

Crearea unui formular folosind React Hook Form

Pentru a crea un formular folosind React Hook Form, trebuie să utilizați

useForm cârlig. The useForm hook vă oferă acces la metode și proprietăți pe care le veți folosi construiți și gestionați formularele în aplicația dvs. React.

Iată un exemplu care arată cum se utilizează useForm cârlig:

import Reacţiona din'reacţiona'
import { useForm } din„formă-cârlig-reacție”;
funcţieFormă() {
const { register, handleSubmit } = useForm();
const onSubmit = (date) =>consolă.log (date);
întoarcere (



'text' { ...Inregistreaza-te("Nume")} />
Trimite</button>
 </form>
 )
}
exportMod implicit Formă;

Biblioteca React Hook Form folosește Inregistreaza-te metodă de a vă înregistra valorile de intrare în cârlig. The Inregistreaza-te metoda conectează câmpurile de intrare ale unui formular la biblioteca React Hook Form, astfel încât biblioteca să poată urmări și valida câmpurile de intrare.

În blocul de cod de mai sus, înregistrați o intrare cu numele „prenume”. handleSubmit metoda bibliotecii React Hook Form se ocupă de trimiterea formularului.

Pentru a gestiona trimiterea formularului, veți trece funcția de apel invers onSubmit la handleSubmit metodă. The onSubmit funcția va primi un obiect care conține valorile tuturor intrărilor din formular.

Validați intrările cu metoda de înregistrare

The Inregistreaza-te metoda vă permite să configurați reguli de validare pentru câmpurile dvs. de introducere. Pentru a adăuga validare la câmpurile dvs. de intrare, treceți un obiect cu reguli de validare ca al doilea argument la Inregistreaza-te metodă.

Ca astfel:

import Reacţiona din'reacţiona'
import { useForm } din„formă-cârlig-reacție”;
funcţieFormă() {
const{ register, handleSubmit } = useForm();
const onSubmit = (date) =>consolă.log (date);
întoarcere (



'text' { ...Inregistreaza-te("Nume", { necesar: Adevărat})} />
'parola' { ...Inregistreaza-te("parola", { necesar: Adevărat, lungime maxima: 10})}/>
Trimite</button>
 </form>
 )
}
exportMod implicit Formă;

În acest exemplu, adăugați o regulă de validare la câmpul de intrare „prenume” și două reguli de validare la „parolă”. The necesar regula specifică că utilizatorul trebuie să completeze câmpurile de intrare și nu poate trimite formularul dacă câmpurile sunt goale.

The lungime maxima regula setează numărul maxim de litere alfabetice al valorii de intrare. În afară de necesar și lungime maxima metode, puteți adăuga alte reguli de validare, cum ar fi min, max, minLungime, model, și valida.

minim maxim

The min regula specifică valoarea minimă pentru un câmp de intrare și max regula specifică valoarea sa maximă.

Puteți folosi min și max reguli cu intrări de tip număr, ca aceasta:

'număr' { ...Inregistreaza-te("vârstă", {min: 18, max: 35}) } />

Valoarea câmpului de intrare de mai sus trebuie să fie de cel puțin 18 și nu mai mult de 35.

minLungime

The minLungime regula este similară cu lungime maxima regula, dar stabilește în schimb numărul minim de litere alfabetice:

'text' { ...Inregistreaza-te("Nume", { minLungime: 10 })}/>

În acest exemplu, regula minLength specifică faptul că valoarea intrării trebuie să aibă cel puțin 10 caractere.

model și validare

The model regula specifică un model de expresie regulată cu care valoarea de intrare trebuie să se potrivească. The valida regula vă permite să definiți o funcție de validare personalizată pentru a valida valoarea de intrare. Funcția ar trebui să revină fie Adevărat sau un mesaj de eroare șir.

De exemplu:

'text' { ...Inregistreaza-te("Nume", {model: **/^[A-Za-z]+$/**}) } />
'număr' { ...Inregistreaza-te("Test", {**validați: (valoare) => valoarea <= 12** }) } />

În acest exemplu, intrarea „prenume” folosește model regulă. The model necesită ca valoarea de intrare să conțină numai caractere alfabetice (majuscule și minuscule).

Intrarea „test” folosește valida regulă pentru a defini o funcție de validare personalizată care verifică dacă valoarea acesteia este mai mică sau egală cu 12.

Gestionarea erorilor din formularul dvs

Biblioteca React Hook Form oferă un mecanism încorporat pentru gestionarea erorilor JavaScript în formele tale. The handleSubmit funcția, apelată atunci când utilizatorul trimite formularul, returnează o promisiune care se rezolvă cu datele formularului dacă validarea are succes.

Cu toate acestea, dacă apar erori de validare, promisiunea este respinsă cu un obiect de eroare care conține erorile de validare.

Iată un exemplu despre cum să gestionați erorile folosind handleSubmit funcţie:

import Reacţiona din'reacţiona'
import { useForm } din„formă-cârlig-reacție”;
funcţieFormă() {
const { înregistrare, tratareTrimite, formState: { erori } } = useForm();
const onSubmit = (date) =>consolă.log (date); 
întoarcere (



'text' { ...Inregistreaza-te("Nume", { necesar: Adevărat})} />
 {errors.firstname && <span>Vă rugăm să introduceți prenumelespan>}
'număr' { ...Inregistreaza-te("vârstă", {min: 18, max: 35,}) } />
 {erori.vârsta?.tip 'max' && <span> Ești prea bătrân pentru acest sitespan>}
 {erori.vârsta?.tip 'min' && <span> Ești prea tânăr pentru acest sitespan>}
Trimite</button>
 </form>
 )
}
exportMod implicit Formă;

În acest bloc de cod, formState obiectul are acces la erorile fiecărui câmp. The erori obiectul stochează erorile de validare pentru fiecare câmp de intrare. The erori obiectul redă condiționat un mesaj de eroare pentru fiecare câmp nevalid.

Pentru Nume câmp de intrare, dacă necesar regula nu este îndeplinită, lângă câmpul de introducere se va afișa un mesaj de eroare—„Vă rugăm să introduceți prenumele”. Dacă valoarea lui vârstă câmpul de introducere se află în afara intervalului permis, se va afișa un mesaj de eroare.

Dacă valoarea este mai mică de 18, mesajul de eroare va fi „Ești prea tânăr pentru acest site”, iar dacă valoarea este mai mare de 35, mesajul de eroare va fi „Ești prea bătrân pentru acest site”.

Acum puteți construi formulare de încredere în React

Construirea formelor în React poate fi un proces complex și consumator de timp. Cu toate acestea, React Hook Form simplifică această sarcină oferind o bibliotecă flexibilă și ușor de utilizat pentru gestionarea datelor și validarea formularelor.

Cu ajutorul metodei useForm hook, register și handleSubmit, construirea formularelor în React devine un proces mai eficient și mai eficient. Puteți crea formulare funcționale, îmbunătățind la rândul său experiența utilizatorului și calitatea generală a aplicațiilor dvs. React.