Izgradite i potvrdite svoje React obrasce uz najmanji napor.

Izrada obrazaca u React aplikaciji može biti složena i dugotrajna. Uz pomoć React Hook Form biblioteke, možete jednostavno dodati forme visokih performansi u svoju React aplikaciju.

React Hook Form je biblioteka za izradu obrazaca u Reactu koja pojednostavljuje proces stvaranja složenih obrazaca koji se mogu ponovno koristiti. Ako želite izraditi React aplikaciju, trebali biste naučiti kako izraditi obrasce u Reactu koristeći React Hook Form biblioteku.

Instaliranje React Hook obrasca

Da biste počeli koristiti React Hook Form, morate ga instalirati pomoću upravitelja paketa npm ili yarn.

Da biste instalirali React Hook Form koristeći npm, pokrenite sljedeću naredbu na vašem terminalu:

npm instalirajte reakcijsku-zakačivu formu

Da biste instalirali React Hook Form koristeći yarn, pokrenite sljedeću naredbu:

pređa dodati oblik kuke za reakciju

Stvaranje obrasca pomoću obrasca React Hook

Da biste stvorili obrazac pomoću React Hook obrasca, morate upotrijebiti

instagram viewer
useForm kuka. The useForm hook vam daje pristup metodama i svojstvima koja ćete koristiti za izradite i upravljajte svojim obrascima u svojoj React aplikaciji.

Evo primjera koji pokazuje kako koristiti useForm kuka:

uvoz Reagirati iz'reagirati'
uvoz {useForm} iz'react-hook-form';

funkcijaOblik() {
konst {registriraj, handleSubmit} = useForm();
konst onSubmit = (podaci) =>konzola.log (podaci);

povratak (


'tekst' { ...Registar("ime")} />

izvozzadano Oblik;

React Hook Form biblioteka koristi Registar metoda za registraciju vaših ulaznih vrijednosti u kuku. The Registar metoda povezuje polja za unos obrasca s bibliotekom obrasca React Hook tako da biblioteka može pratiti i potvrditi polja za unos.

U gornjem bloku koda registrirate unos s imenom "ime". rukovanjePošalji metoda React Hook Form biblioteke obrađuje podnošenje obrasca.

Za rukovanje slanjem obrasca, proći ćete funkciju povratnog poziva onSubmit prema rukovanjePošalji metoda. The onSubmit funkcija će primiti objekt koji sadrži vrijednosti svih ulaza obrasca.

Provjera valjanosti unosa metodom registracije

The Registar omogućuje vam postavljanje pravila provjere valjanosti za vaša polja unosa. Da biste dodali provjeru valjanosti svojim poljima za unos, proslijedite objekt s pravilima provjere valjanosti kao drugi argument u Registar metoda.

ovako:

uvoz Reagirati iz'reagirati'
uvoz {useForm} iz'react-hook-form';

funkcijaOblik() {

konst{registriraj, handleSubmit} = useForm();

konst onSubmit = (podaci) =>konzola.log (podaci);

povratak (


'tekst' { ...Registar("ime", { potreban: pravi})} />
'lozinka' { ...Registar("lozinka", { potreban: pravi, maksimalna dužina: 10})}/>

izvozzadano Oblik;

U ovom primjeru dodajete pravilo provjere valjanosti polju za unos "ime" i dva pravila provjere valjanosti polju "lozinka". The potreban Pravilo navodi da korisnik mora ispuniti polja za unos i ne može poslati obrazac ako su polja prazna.

The maksimalna dužina pravilo postavlja najveći broj abecednih slova ulazne vrijednosti. Osim potreban i maksimalna dužina metode, možete dodati druga pravila provjere valjanosti, kao što su min, max, minLength, uzorak, i potvrditi.

min & maks

The min pravilo navodi minimalnu vrijednost za polje za unos i max pravilo navodi njegovu maksimalnu vrijednost.

Možete koristiti min i max pravila s unosima tipa brojeva, poput ovog:

'broj' { ...Registar("dob", {min: 18, max: 35}) } />

Vrijednost gornjeg polja za unos mora biti najmanje 18 i ne više od 35.

minLength

The minLength pravilo je slično maksimalna dužina pravilo, ali umjesto toga postavlja minimalni broj abecednih slova:

'tekst' { ...Registar("Ime", { minLength: 10 })}/>

U ovom primjeru pravilo minLength navodi da vrijednost unosa treba imati najmanje 10 znakova.

obrazac i potvrdi

The uzorak pravilo specificira uzorak regularnog izraza s kojim ulazna vrijednost mora odgovarati. The potvrditi pravilo vam omogućuje da definirate prilagođenu funkciju provjere valjanosti za provjeru valjanosti ulazne vrijednosti. Funkcija bi se trebala vratiti ili pravi ili poruka o pogrešci niza.

Na primjer:

'tekst' { ...Registar("ime", {uzorak: **/^[A-Za-z]+$/**}) } />
'broj' { ...Registar("test", {**potvrdi: (vrijednost) => vrijednost <= 12** }) } />

U ovom primjeru, unos "ime" koristi uzorak Pravilo. The uzorak zahtijeva da ulazna vrijednost sadrži samo abecedne znakove (velika i mala slova).

Unos "test" koristi potvrditi pravilo za definiranje prilagođene funkcije provjere valjanosti koja provjerava je li njezina vrijednost manja ili jednaka 12.

Rješavanje pogrešaka u vašem obrascu

React Hook Form biblioteka pruža ugrađeni mehanizam za rukovanje JavaScript pogreškama u vašim obrascima. The rukovanjePošalji funkcija, koja se poziva kada korisnik preda obrazac, vraća obećanje koje se rješava s podacima obrasca ako je provjera valjanosti uspješna.

Međutim, ako dođe do bilo kakvih pogrešaka provjere valjanosti, obećanje se odbija s objektom pogreške koji sadrži pogreške provjere valjanosti.

Evo primjera kako postupati s pogreškama pomoću rukovanjePošalji funkcija:

uvoz Reagirati iz'reagirati'
uvoz {useForm} iz'react-hook-form';

funkcijaOblik() {
konst { register, handleSubmit, formState: { pogreške } } = useForm();
konst onSubmit = (podaci) =>konzola.log (podaci);

povratak (


'tekst' { ...Registar("ime", { potreban: pravi})} />
{greške.ime && <raspon>Molimo unesite svoje imeraspon>}

'broj' { ...Registar("dob", {min: 18, max: 35,}) } />
{errors.age?.type 'max' && <raspon> Prestar si za ovu stranicuraspon>}
{errors.age?.type 'min' && <raspon> Premladi ste za ovu stranicuraspon>}

izvozzadano Oblik;

U ovom bloku koda, formState objekt dobiva pristup pogreškama svakog polja. The pogreške objekt pohranjuje pogreške provjere valjanosti za svako polje unosa. The pogreške objekt uvjetno prikazuje poruku o pogrešci za svako nevažeće polje.

Za ime polje za unos, ako je potreban pravilo nije ispunjeno, poruka o pogrešci — "Unesite svoje ime" — prikazat će se pored polja za unos. Ako je vrijednost dob polje za unos je izvan dopuštenog raspona, prikazat će se poruka o pogrešci.

Ako je vrijednost manja od 18, poruka o pogrešci će biti "Premladi ste za ovu stranicu", a ako je vrijednost veća od 35, poruka o pogrešci će biti "Prestari ste za ovu stranicu".

Sada možete graditi pouzdane obrasce u Reactu

Izrada obrazaca u Reactu može biti složen i dugotrajan proces. Ipak, React Hook Form pojednostavljuje ovaj zadatak pružajući jednostavnu i fleksibilnu biblioteku za upravljanje podacima obrazaca i provjeru valjanosti.

Uz pomoć useForm kuke, register metode i handleSubmit metode, izrada obrazaca u Reactu postaje učinkovitiji i jednostavniji proces. Možete stvoriti funkcionalne obrasce, poboljšavajući korisničko iskustvo i ukupnu kvalitetu vaših React aplikacija.