Kuidas luua vorme Reactis React Hook vormi abil

Reacti rakenduse vormide koostamine võib olla keeruline ja aeganõudev. Teegi React Hook Form abil saate hõlpsasti lisada oma Reacti rakendusse suure jõudlusega vorme.

React Hook Form on Reacti vormide koostamise teek, mis lihtsustab keerukate ja korduvkasutatavate vormide loomise protsessi. Kui soovite luua Reacti rakendust, peaksite õppima, kuidas luua Reactis vorme, kasutades React Hooki vormi teeki.

React Hook vormi paigaldamine

React Hook Formi kasutamise alustamiseks peate selle installima npm- või lõngapaketihaldurite abil.

React Hook Formi installimiseks npm abil käivitage terminalis järgmine käsk:

npm install react-hook-form

React Hook Formi installimiseks lõnga abil käivitage järgmine käsk:

lõng lisa reageeri-konks-vorm

Vormi loomine React Hook vormi abil

Vormi loomiseks React Hook vormi abil peate kasutama kasutusvorm konks. The kasutusvorm konks annab teile juurdepääsu meetoditele ja omadustele, mida kasutate luua ja hallata oma vorme oma Reacti rakenduses.

Siin on näide, mis näitab, kuidas kasutada kasutusvorm konks:

importida Reageerige alates'reageeri'
importida { useForm } alates'reageerimiskonks-vorm';
funktsiooniVorm() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (andmeid) =>konsool.log (andmed);
tagasi (



'tekst' { ...Registreeri("eesnimi")} />
Esita</button>
 </form>
 )
}
eksportidavaikimisi Vorm;

Teek React Hook Form kasutab Registreeri meetod oma sisendväärtuste konksule registreerimiseks. The Registreeri meetod ühendab vormi sisendväljad React Hook Form teegiga, et teek saaks sisendvälju jälgida ja kinnitada.

Ülaltoodud koodiplokis registreerite sisendi nimega "eesnimi". käepide Esita React Hook Form teegi meetod käsitleb vormi esitamist.

Vormi esitamise käsitlemiseks edastate tagasihelistamise funktsiooni on Submit juurde käepide Esita meetod. The on Submit funktsioon saab objekti, mis sisaldab kõigi vormisisendite väärtusi.

Kinnitage sisendid registrimeetodiga

The Registreeri meetod võimaldab teil seadistada sisestusväljade valideerimisreegleid. Sisestusväljadele valideerimise lisamiseks edastate teise argumendina valideerimisreeglitega objekti Registreeri meetod.

Nagu nii:

importida Reageerige alates'reageeri'
importida { useForm } alates'reageerimiskonks-vorm';
funktsiooniVorm() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (andmeid) =>konsool.log (andmed);
tagasi (



'tekst' { ...Registreeri("eesnimi", { nõutud: tõsi})} />
'parool' { ...Registreeri("parool", { nõutud: tõsi, maxPikkus: 10})}/>
Esita</button>
 </form>
 )
}
eksportidavaikimisi Vorm;

Selles näites lisate sisestusväljale "eesnimi" valideerimisreegli ja paroolile kaks valideerimisreeglit. The nõutud reegel määrab, et kasutaja peab täitma sisestusväljad ja ta ei saa vormi esitada, kui väljad on tühjad.

The max pikkus reegel määrab sisendväärtuse maksimaalse tähestikutähtede arvu. Peale selle nõutud ja max pikkus meetodeid, saate lisada muid valideerimisreegleid, nt min, max, minPikkus, muster, ja kinnitada.

min ja max

The min reegel määrab sisendvälja minimaalse väärtuse ja max reegel määrab selle maksimaalse väärtuse.

Võite kasutada min ja max numbritüüpi sisenditega reeglid, näiteks:

'number' { ...Registreeri("vanus", {min: 18, max: 35}) } />

Ülaltoodud sisestusvälja väärtus peab olema vähemalt 18 ja mitte rohkem kui 35.

minPikkus

The minPikkus reegel on sarnane maxPikkus reegel, kuid määrab selle asemel minimaalse tähestikutähtede arvu:

'tekst' { ...Registreeri("nimi", { minPikkus: 10 })}/>

Selles näites määrab reegel minLength, et sisendi väärtus peab olema vähemalt 10 tähemärki pikk.

muster ja kinnita

The muster reegel määrab regulaaravaldise mustri, millele sisendväärtus peab ühtima. The kinnitada reegel võimaldab teil sisendväärtuse kinnitamiseks määratleda kohandatud valideerimisfunktsiooni. Funktsioon peaks kas ka tagastama tõsi või stringi veateade.

Näiteks:

'tekst' { ...Registreeri("eesnimi", {muster: **/^[A-Za-z]+$/**}) } />
'number' { ...Registreeri("test", {**kinnita: (väärtus) => väärtus <= 12** }) } />

Selles näites kasutab "eesnimi" sisend muster reegel. The muster nõuab, et sisendväärtus sisaldaks ainult tähestikulisi märke (suur- ja väiketähed).

Sisend "test" kasutab kinnitada reegel kohandatud valideerimisfunktsiooni määratlemiseks, mis kontrollib, kas selle väärtus on väiksem kui 12 või sellega võrdne.

Vormis olevate vigade käsitlemine

Teek React Hook Form pakub sisseehitatud mehhanismi JavaScripti vigade käsitlemine teie vormides. The käepide Esita funktsioon, mida kutsutakse välja, kui kasutaja vormi esitab, tagastab lubaduse, mis laheneb vormiandmetega, kui valideerimine on edukas.

Kui aga ilmnevad valideerimise vead, lükatakse lubadus tagasi valideerimisvigu sisaldava veaobjektiga.

Siin on näide selle kohta, kuidas tõrketeateid kasutades käsitleda käepide Esita funktsioon:

importida Reageerige alates'reageeri'
importida { useForm } alates'reageerimiskonks-vorm';
funktsiooniVorm() {
konst { register, handleSubmit, formState: { vead } } = useForm();
konst onSubmit = (andmeid) =>konsool.log (andmed); 
tagasi (



'tekst' { ...Registreeri("eesnimi", { nõutud: tõsi})} />
 {errors.firstname && <ulatus>Palun sisestage oma eesnimiulatus>}
'number' { ...Registreeri("vanus", {min: 18, max: 35,}) } />
 {errors.age?.type 'max' && <ulatus> Olete selle saidi jaoks liiga vanaulatus>}
 {errors.age?.type 'min' && <ulatus> Olete selle saidi jaoks liiga noorulatus>}
Esita</button>
 </form>
 )
}
eksportidavaikimisi Vorm;

Selles koodiplokis on formState objekt pääseb ligi iga välja vigadele. The vead objekt salvestab iga sisendvälja valideerimisvead. The vead objekt esitab tingimuslikult veateate iga kehtetu välja kohta.

Jaoks eesnimi sisestusväli, kui nõutud reeglit ei täideta, kuvatakse sisestusvälja kõrval veateade "Palun sisestage oma eesnimi". Kui väärtus vanus sisestusväli on väljaspool lubatud vahemikku, kuvatakse veateade.

Kui väärtus on väiksem kui 18, kuvatakse veateade "Olete selle saidi jaoks liiga noor" ja kui väärtus on suurem kui 35, kuvatakse veateade "Olete selle saidi jaoks liiga vana".

Nüüd saate Reactis luua usaldusväärseid vorme

Vormide loomine Reactis võib olla keeruline ja aeganõudev protsess. Sellegipoolest lihtsustab React Hook Form seda ülesannet, pakkudes vormiandmete haldamiseks ja valideerimiseks lihtsalt kasutatavat ja paindlikku teeki.

UseForm konksu, registrimeetodi ja HandSubmit meetodi abil muutub Reactis vormide koostamine tõhusamaks ja sujuvamaks protsessiks. Saate luua funktsionaalseid vorme, mis omakorda parandavad oma Reacti rakenduste kasutuskogemust ja üldist kvaliteeti.