Kako zgraditi obrazce v Reactu z uporabo obrazca React Hook

Gradnja obrazcev v aplikaciji React je lahko zapletena in dolgotrajna. S pomočjo knjižnice React Hook Form lahko svoji aplikaciji React preprosto dodate visoko zmogljive obrazce.

React Hook Form je knjižnica za gradnjo obrazcev v Reactu, ki poenostavi postopek ustvarjanja zapletenih in ponovno uporabnih obrazcev. Če želite zgraditi aplikacijo React, se morate naučiti sestavljati obrazce v Reactu z uporabo knjižnice React Hook Form.

Namestitev obrazca React Hook

Če želite začeti uporabljati React Hook Form, ga morate namestiti z upravitelji paketov npm ali yarn.

Če želite namestiti React Hook Form z uporabo npm, zaženite naslednji ukaz v vašem terminalu:

npm namestite reakcijsko-hook-formo

Če želite namestiti React Hook Form z uporabo preje, zaženite naslednji ukaz:

preja dodaj reakcijsko-kaveljsko obliko

Ustvarjanje obrazca z uporabo obrazca React Hook

Če želite ustvariti obrazec z uporabo obrazca React Hook, morate uporabiti useForm

kavelj. The useForm hook vam omogoča dostop do metod in lastnosti, ki jih boste uporabili za ustvarite in upravljajte obrazce v svoji aplikaciji React.

Tukaj je primer, ki prikazuje, kako uporabljati useForm kavelj:

uvoz Reagiraj od'reagirati'
uvoz {useForm} od'react-hook-form';
funkcijoOblika() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (podatke) =>konzola.log (podatki);
vrnitev (



'besedilo' { ...registracija("ime")} />
Predloži</button>
 </form>
 )
}
izvozprivzeto Oblika;

Knjižnica React Hook Form uporablja register metoda za registracijo vaših vhodnih vrednosti v kavelj. The register povezuje vnosna polja obrazca s knjižnico React Hook Form, tako da lahko knjižnica sledi in preverja vnosna polja.

V zgornjem kodnem bloku registrirate vnos z imenom »ime«. handleSubmit metoda knjižnice React Hook Form obravnava oddajo obrazca.

Za obdelavo oddaje obrazca boste posredovali funkcijo povratnega klica onSubmit do handleSubmit metoda. The onSubmit funkcija bo prejela objekt, ki vsebuje vrednosti vseh vnosov obrazca.

Preverjanje vnosov z metodo registra

The register vam omogoča, da nastavite pravila za preverjanje veljavnosti za vaša vnosna polja. Če želite svojim vnosnim poljem dodati preverjanje veljavnosti, posredujte objekt s pravili preverjanja kot drugi argument v register metoda.

takole:

uvoz Reagiraj od'reagirati'
uvoz {useForm} od'react-hook-form';
funkcijoOblika() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (podatke) =>konzola.log (podatki);
vrnitev (



'besedilo' { ...registracija("ime", { potrebno: prav})} />
'geslo' { ...registracija("geslo", { potrebno: prav, maxLength: 10})}/>
Predloži</button>
 </form>
 )
}
izvozprivzeto Oblika;

V tem primeru dodate potrditveno pravilo v vnosno polje »ime« in dve potrditveni pravili v »geslo«. The potrebno pravilo določa, da mora uporabnik izpolniti vnosna polja in ne more oddati obrazca, če so polja prazna.

The maxlength pravilo nastavi največje število abecednih črk vhodne vrednosti. Poleg tega potrebno in maxlength metode, lahko dodate druga pravila preverjanja, kot npr min, maks, minLength, vzorec, in potrditi.

min & maks

The min pravilo določa najmanjšo vrednost za vnosno polje in maks pravilo določa njegovo največjo vrednost.

Lahko uporabite min in maks pravila z vnosi številske vrste, kot je ta:

'število' { ...registracija("starost", {min: 18, maks: 35}) } />

Vrednost zgornjega vnosnega polja mora biti vsaj 18 in ne več kot 35.

minLength

The minLength pravilo je podobno maxLength vendar namesto tega nastavi najmanjše število abecednih črk:

'besedilo' { ...registracija("ime", { minLength: 10 })}/>

V tem primeru pravilo minLength določa, da mora biti vhodna vrednost dolga vsaj 10 znakov.

vzorec in potrdi

The vzorec pravilo določa vzorec regularnega izraza, s katerim se mora ujemati vhodna vrednost. The potrditi vam omogoča, da definirate funkcijo preverjanja po meri za preverjanje vhodne vrednosti. Tudi funkcija bi se morala vrniti prav ali sporočilo o napaki niza.

Na primer:

'besedilo' { ...registracija("ime", {vzorec: **/^[A-Za-z]+$/**}) } />
'število' { ...registracija("test", {** potrdi: (vrednost) => vrednost <= 12** }) } />

V tem primeru vnos »ime« uporablja vzorec pravilo. The vzorec zahteva, da vhodna vrednost vsebuje samo abecedne znake (velike in male črke).

Vnos »test« uporablja potrditi pravilo za definiranje funkcije preverjanja po meri, ki preverja, ali je njena vrednost manjša ali enaka 12.

Obravnava napak v vašem obrazcu

Knjižnica React Hook Form ponuja vgrajen mehanizem za obravnavanje napak JavaScript v vaših obrazcih. The handleSubmit funkcija, ki se kliče, ko uporabnik odda obrazec, vrne obljubo, ki se razreši s podatki obrazca, če je preverjanje uspešno.

Če pa pride do kakršnih koli napak pri preverjanju, je obljuba zavrnjena z objektom napake, ki vsebuje napake pri preverjanju.

Tukaj je primer, kako obravnavati napake z uporabo handleSubmit funkcija:

uvoz Reagiraj od'reagirati'
uvoz {useForm} od'react-hook-form';
funkcijoOblika() {
konst { register, handleSubmit, formState: { napake } } = useForm();
konst onSubmit = (podatke) =>konzola.log (podatki); 
vrnitev (



'besedilo' { ...registracija("ime", { potrebno: prav})} />
 {errors.firstname && <razpon>Prosimo, vnesite svoje imerazpon>}
'število' { ...registracija("starost", {min: 18, maks: 35,}) } />
 {errors.age?.type 'max' && <razpon> Prestar si za to stranrazpon>}
 {errors.age?.type 'min' && <razpon> Premladi ste za to stranrazpon>}
Predloži</button>
 </form>
 )
}
izvozprivzeto Oblika;

V tem kodnem bloku je formState objekt pridobi dostop do napak vsakega polja. The napake objekt shrani napake preverjanja za vsako vnosno polje. The napake predmet pogojno upodobi sporočilo o napaki za vsako neveljavno polje.

Za ime vnosno polje, če je potrebno pravilo ni izpolnjeno, bo poleg vnosnega polja prikazano sporočilo o napaki — »Prosimo, vnesite svoje ime«. Če je vrednost starost vnosno polje je izven dovoljenega obsega, se prikaže sporočilo o napaki.

Če je vrednost manjša od 18, bo sporočilo o napaki »Premladi ste za to spletno mesto«, če pa je vrednost večja od 35, bo sporočilo o napaki »Prestari ste za to spletno mesto«.

Zdaj lahko v Reactu sestavite zanesljive obrazce

Gradnja obrazcev v Reactu je lahko zapleten in dolgotrajen proces. Kljub temu React Hook Form poenostavlja to nalogo z zagotavljanjem preproste in prilagodljive knjižnice za upravljanje podatkov obrazcev in preverjanje veljavnosti.

S pomočjo kljuke useForm, metode register in metode handleSubmit postane izdelava obrazcev v Reactu bolj učinkovit in poenostavljen proces. Ustvarite lahko funkcionalne obrazce, s čimer izboljšate uporabniško izkušnjo in splošno kakovost svojih aplikacij React.