Kaip sukurti formas „React“ naudojant „React Hook“ formą

Formų kūrimas „React“ programoje gali būti sudėtingas ir reikalaujantis daug laiko. Naudodami „React Hook Form“ biblioteką galite lengvai pridėti našių formų į „React“ programą.

„React Hook Form“ yra „React“ formų kūrimo biblioteka, kuri supaprastina sudėtingų ir daugkartinių formų kūrimo procesą. Jei norite sukurti „React“ programą, turėtumėte sužinoti, kaip „React“ kurti formas naudodami „React Hook Form“ biblioteką.

„React Hook Form“ diegimas

Norėdami pradėti naudoti „React Hook Form“, turite ją įdiegti naudodami „npm“ arba „yarn“ paketų tvarkykles.

Norėdami įdiegti „React Hook Form“ naudodami npm, savo terminale paleiskite šią komandą:

npm įdiegti react-hook-form

Norėdami įdiegti „React Hook Form“ naudodami siūlą, paleiskite šią komandą:

verpalai pridėti react-hook-formą

Formos kūrimas naudojant React Hook formą

Norėdami sukurti formą naudodami „React Hook Form“, turite naudoti naudojimo Forma kabliukas. The naudojimo Forma

hook suteikia prieigą prie metodų ir savybių, kurias naudosite kurkite ir tvarkykite formas savo „React“ programoje.

Čia yra pavyzdys, rodantis, kaip naudoti naudojimo Forma kabliukas:

importuoti Reaguoti iš'reaguoti'
importuoti { useForm } iš„reagavimo kablio forma“;
funkcijaForma() {
konst { registras, rankenaPateikti } = useForm();
konst onSubmit = (duomenis) =>konsolė.log (duomenys);
grąžinti (



'tekstas' { ...Registruotis("Pirmas vardas")} />
Pateikti</button>
 </form>
 )
}
eksportuotinumatytas Forma;

„React Hook Form“ biblioteka naudoja Registruotis būdas užregistruoti įvesties vertes. The Registruotis metodas sujungia formos įvesties laukus su React Hook Form biblioteka, kad biblioteka galėtų sekti ir patvirtinti įvesties laukus.

Aukščiau esančiame kodų bloke užregistruojate įvestį pavadinimu „vardas“. rankenaPateikti React Hook Form bibliotekos metodas tvarko formos pateikimą.

Norėdami tvarkyti formos pateikimą, turėsite perduoti atgalinio skambinimo funkciją onSubmit prie rankenaPateikti metodas. The onSubmit funkcija gaus objektą su visų formos įvesties reikšmėmis.

Patvirtinkite įvestis registro metodu

The Registruotis metodas leidžia nustatyti įvesties laukų patvirtinimo taisykles. Norėdami įtraukti patvirtinimą į įvesties laukus, kaip antrąjį argumentą perduodate objektą su patvirtinimo taisyklėmis Registruotis metodas.

Kaip taip:

importuoti Reaguoti iš'reaguoti'
importuoti { useForm } iš„reagavimo kablio forma“;
funkcijaForma() {
konst{ registras, rankenaPateikti } = useForm();
konst onSubmit = (duomenis) =>konsolė.log (duomenys);
grąžinti (



'tekstas' { ...Registruotis("Pirmas vardas", { reikalaujama: tiesa})} />
'Slaptažodis' { ...Registruotis("Slaptažodis", { reikalaujama: tiesa, Didžiausias ilgis: 10})}/>
Pateikti</button>
 </form>
 )
}
eksportuotinumatytas Forma;

Šiame pavyzdyje įvesties lauką „vardas“ pridedate patvirtinimo taisyklę, o prie „slaptažodžio“ – dvi patvirtinimo taisykles. The reikalaujama taisyklė nurodo, kad vartotojas turi užpildyti įvesties laukus ir negali pateikti formos, jei laukai yra tušti.

The Didžiausias ilgis taisyklė nustato didžiausią įvesties vertės abėcėlės raidžių skaičių. Be to reikalaujama ir Didžiausias ilgis metodus, galite pridėti kitų patvirtinimo taisyklių, pvz min, maks, minIlgis, modelis, ir patvirtinti.

min ir maks

The min taisyklė nurodo mažiausią įvesties lauko reikšmę ir maks taisyklė nurodo maksimalią jo reikšmę.

Galite naudoti min ir maks taisyklės su skaičių tipo įvestimis, pavyzdžiui:

"skaičius" { ...Registruotis("amžius", {min: 18, maks: 35}) } />

Aukščiau esančio įvesties lauko reikšmė turi būti bent 18 ir ne didesnė kaip 35.

minIlgis

The minIlgis taisyklė yra panaši į Didžiausias ilgis taisyklę, bet vietoj to nustato mažiausią abėcėlės raidžių skaičių:

'tekstas' { ...Registruotis("vardas", { minIlgis: 10 })}/>

Šiame pavyzdyje taisyklė minLength nurodo, kad įvesties vertė turi būti bent 10 simbolių ilgio.

modeliuoti ir patvirtinti

The modelis taisyklė nurodo reguliariosios išraiškos šabloną, kurį turi atitikti įvesties reikšmė. The patvirtinti Taisyklė leidžia apibrėžti pasirinktinę patvirtinimo funkciją įvesties vertei patvirtinti. Funkcija taip pat turėtų grįžti tiesa arba eilutės klaidos pranešimas.

Pavyzdžiui:

'tekstas' { ...Registruotis("Pirmas vardas", {modelis: **/^[A-Za-z]+$/**}) } />
"skaičius" { ...Registruotis("bandymas", {**patvirtinti: (vertė) => vertė <= 12** }) } />

Šiame pavyzdyje „vardas“ įvestis naudoja modelis taisyklė. The modelis reikalauja, kad įvesties reikšmėje būtų tik abėcėlės simboliai (didžiosios ir mažosios raidės).

„Test“ įvestis naudoja patvirtinti Taisyklė, skirta apibrėžti tinkintą patvirtinimo funkciją, kuri tikrina, ar jos reikšmė yra mažesnė arba lygi 12.

Formos klaidų tvarkymas

„React Hook Form“ bibliotekoje yra įmontuotas mechanizmas „JavaScript“ klaidų tvarkymas savo formose. The rankenaPateikti funkcija, iškviesta, kai vartotojas pateikia formą, grąžina pažadą, kuris išsprendžiamas naudojant formos duomenis, jei patvirtinimas sėkmingas.

Tačiau, jei įvyksta patvirtinimo klaidų, pažadas atmetamas naudojant klaidos objektą, kuriame yra patvirtinimo klaidų.

Štai pavyzdys, kaip tvarkyti klaidas naudojant rankenaPateikti funkcija:

importuoti Reaguoti iš'reaguoti'
importuoti { useForm } iš„reagavimo kablio forma“;
funkcijaForma() {
konst { register, handleSubmit, formaBūsena: { errors } } = useForm();
konst onSubmit = (duomenis) =>konsolė.log (duomenys); 
grąžinti (



'tekstas' { ...Registruotis("Pirmas vardas", { reikalaujama: tiesa})} />
 {errors.firstname && <span>Įveskite savo vardąspan>}
"skaičius" { ...Registruotis("amžius", {min: 18, maks: 35,}) } />
 {errors.age?.type 'max' && <span> Jūs esate per senas šiai svetaineispan>}
 {errors.age?.type 'min' && <span> Jūs per jaunas šiai svetaineispan>}
Pateikti</button>
 </form>
 )
}
eksportuotinumatytas Forma;

Šiame kodo bloke formaBūsena objektas gauna prieigą prie kiekvieno lauko klaidų. The klaidų objektas saugo kiekvieno įvesties lauko patvirtinimo klaidas. The klaidų objektas sąlyginai pateikia klaidos pranešimą kiekvienam netinkamam laukui.

Už Pirmas vardas įvesties laukas, jei reikalaujama nesilaikoma taisyklės, šalia įvesties lauko bus rodomas klaidos pranešimas „Įveskite savo vardą“. Jei vertė amžiaus įvesties laukas yra už leistino diapazono ribų, bus rodomas klaidos pranešimas.

Jei reikšmė mažesnė nei 18, klaidos pranešimas bus „Esate per jaunas šiai svetainei“, o jei reikšmė didesnė nei 35, klaidos pranešimas bus „Esate per senas šiai svetainei“.

Dabar „React“ galite sukurti patikimas formas

React formų kūrimas gali būti sudėtingas ir daug laiko reikalaujantis procesas. Vis dėlto „React Hook Form“ supaprastina šią užduotį, nes suteikia lengvai naudojamą ir lanksčią biblioteką formos duomenims tvarkyti ir patvirtinimui.

Naudojant „useForm hook“, registro metodą ir „handlerSubmit“ metodą, formų kūrimas „React“ tampa efektyvesnis ir supaprastesnis procesas. Galite kurti funkcines formas, savo ruožtu pagerindami naudotojo patirtį ir bendrą „React“ programų kokybę.