Hogyan építsünk formákat a React-ban a React Hook Form használatával

Az űrlapok felépítése egy React alkalmazásban bonyolult és időigényes lehet. A React Hook Form könyvtár segítségével könnyedén hozzáadhat nagy teljesítményű űrlapokat React alkalmazásához.

A React Hook Form egy könyvtár a React űrlapjainak létrehozásához, amely leegyszerűsíti az összetett és újrafelhasználható űrlapok létrehozásának folyamatát. Ha React alkalmazást szeretne létrehozni, meg kell tanulnia, hogyan hozhat létre űrlapokat a React alkalmazásban a React Hook Form könyvtár használatával.

A React Hook Form telepítése

A React Hook Form használatának megkezdéséhez telepítenie kell az npm vagy a yarn csomagkezelők használatával.

A React Hook Form npm használatával történő telepítéséhez futtassa a következő parancsot a terminálon:

npm install react-hook-form

A React Hook Form fonal használatával történő telepítéséhez futtassa a következő parancsot:

fonal add react-hook-form

Űrlap létrehozása React Hook űrlap segítségével

Űrlap létrehozásához a React Hook Form használatával, használnia kell a

useForm horog. A useForm hook hozzáférést biztosít azokhoz a módszerekhez és tulajdonságokhoz, amelyeket használni fog elkészítheti és kezelheti űrlapjait a React alkalmazásban.

Itt van egy példa, amely bemutatja, hogyan kell használni a useForm horog:

import Reagál tól től'reagál'
import { useForm } tól től'react-hook-form';
funkcióForma() {
const { register, handleSubmit } = useForm();
const onSubmit = (adat) =>konzol.log (adatok);
Visszatérés (



'szöveg' { ...Regisztráció("keresztnév")} />
Küldés</button>
 </form>
 )
}
exportalapértelmezett Forma;

A React Hook Form könyvtár a Regisztráció módszerrel regisztrálhatja a bemeneti értékeket a horogba. A Regisztráció metódus összekapcsolja egy űrlap beviteli mezőit a React Hook Form könyvtárral, hogy a könyvtár nyomon tudja követni és ellenőrizni tudja a beviteli mezőket.

A fenti kódblokkban regisztrál egy bemenetet a „keresztnév” névvel handleSubmit A React Hook Form könyvtár metódusa kezeli az űrlap beküldését.

Az űrlap elküldésének kezeléséhez át kell adnia a visszahívási funkciót onSubmit hoz handleSubmit módszer. A onSubmit függvény kap egy objektumot, amely tartalmazza az összes űrlap bemenet értékét.

Érvényesítse a bemeneteket a regisztrációs módszerrel

A Regisztráció módszer lehetővé teszi, hogy érvényesítési szabályokat állítson be a beviteli mezőkhöz. A beviteli mezők érvényesítésének hozzáadásához adjon át egy érvényesítési szabályokkal rendelkező objektumot második argumentumként a Regisztráció módszer.

Például így:

import Reagál tól től'reagál'
import { useForm } tól től'react-hook-form';
funkcióForma() {
const{ register, handleSubmit } = useForm();
const onSubmit = (adat) =>konzol.log (adatok);
Visszatérés (



'szöveg' { ...Regisztráció("keresztnév", { kívánt: igaz})} />
'Jelszó' { ...Regisztráció("Jelszó", { kívánt: igaz, maxLength: 10})}/>
Küldés</button>
 </form>
 )
}
exportalapértelmezett Forma;

Ebben a példában egy érvényesítési szabályt ad a „firstname” beviteli mezőhöz, és két érvényesítési szabályt a „jelszóhoz”. A kívánt szabály azt határozza meg, hogy a felhasználónak ki kell töltenie a beviteli mezőket, és nem tudja elküldeni az űrlapot, ha a mezők üresek.

A max hossz szabály beállítja a bemeneti érték maximális alfabetikus betűszámát. Eltekintve a kívánt és max hossz módszereket, hozzáadhat más érvényesítési szabályokat, mint pl min, max, minLength, minta, és érvényesít.

minimum maximum

A min szabály megadja egy beviteli mező minimális értékét és a max szabály határozza meg a maximális értékét.

Használhatja a min és max szabályok szám típusú bemenetekkel, például:

'szám' { ...Regisztráció("kor", {min: 18, max: 35}) } />

A fenti beviteli mező értéke legalább 18 és legfeljebb 35 lehet.

minLength

A minLength szabály hasonló a maxLength szabály, de beállítja az ábécé betűinek minimális számát:

'szöveg' { ...Regisztráció("név", { minLength: 10 })}/>

Ebben a példában a minLength szabály azt határozza meg, hogy a bemenet értékének legalább 10 karakter hosszúnak kell lennie.

minta és érvényesítés

A minta szabály egy reguláris kifejezés-mintát ad meg, amelynek a bemeneti értéknek meg kell egyeznie. A érvényesít szabály lehetővé teszi egy egyéni érvényesítési függvény meghatározását a bemeneti érték érvényesítéséhez. A függvénynek is vissza kell térnie igaz vagy egy karakterlánc hibaüzenet.

Például:

'szöveg' { ...Regisztráció("keresztnév", {minta: **/^[A-Za-z]+$/**}) } />
'szám' { ...Regisztráció("teszt", {**érvényesít: (érték) => érték <= 12** }) } />

Ebben a példában a „keresztnév” bemenet a minta szabály. A minta megköveteli, hogy a beviteli érték csak alfabetikus karaktereket (nagy- és kisbetűket) tartalmazzon.

A „teszt” bemenet a érvényesít szabály egy egyéni érvényesítési függvény meghatározásához, amely ellenőrzi, hogy értéke kisebb-e vagy egyenlő-e 12-vel.

Az űrlapon lévő hibák kezelése

A React Hook Form könyvtár beépített mechanizmust biztosít a JavaScript hibák kezelése a formáitokban. A handleSubmit függvény, amelyet akkor hívunk meg, amikor a felhasználó elküldi az űrlapot, ígéretet ad vissza, amely az űrlap adataival oldódik meg, ha az ellenőrzés sikeres.

Ha azonban bármilyen érvényesítési hiba történik, az ígéret elutasításra kerül egy olyan hibaobjektummal, amely tartalmazza az érvényesítési hibákat.

Íme egy példa arra, hogyan kell kezelni a hibákat a handleSubmit funkció:

import Reagál tól től'reagál'
import { useForm } tól től'react-hook-form';
funkcióForma() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (adat) =>konzol.log (adatok); 
Visszatérés (



'szöveg' { ...Regisztráció("keresztnév", { kívánt: igaz})} />
 {errors.firstname && <span>Kérjük, adja meg a keresztnevétspan>}
'szám' { ...Regisztráció("kor", {min: 18, max: 35,}) } />
 {errors.age?.type 'max' && <span> Túl öreg vagy ehhez az oldalhozspan>}
 {errors.age?.type "min" && <span> Túl fiatal vagy ehhez az oldalhozspan>}
Küldés</button>
 </form>
 )
}
exportalapértelmezett Forma;

Ebben a kódblokkban a formState objektum hozzáférést kap az egyes mezők hibáihoz. A hibákat Az objektum minden egyes beviteli mező érvényesítési hibáit tárolja. A hibákat Az objektum feltételesen hibaüzenetet ad minden érvénytelen mezőhöz.

A keresztnév beviteli mező, ha a kívánt szabály nem teljesül, a beviteli mező mellett megjelenik egy hibaüzenet – „Kérjük, adja meg keresztnevét”. Ha az értéke a kor A beviteli mező a megengedett tartományon kívül esik, hibaüzenet jelenik meg.

Ha az érték kisebb, mint 18, a hibaüzenet a következő lesz: "Túl fiatal vagy ehhez a webhelyhez", ha pedig az érték nagyobb, mint 35, akkor a következő hibaüzenet jelenik meg: "Túl öreg vagy ehhez az oldalhoz".

Most már megbízható űrlapokat készíthet a Reactban

A React-ban a formák felépítése összetett és időigényes folyamat lehet. A React Hook Form mégis leegyszerűsíti ezt a feladatot, mivel könnyen használható és rugalmas könyvtárat biztosít az űrlapadatok kezeléséhez és az érvényesítéshez.

A useForm hook, a register metódus és a handleSubmit metódus segítségével az űrlapok felépítése a Reactban hatékonyabb és letisztultabb folyamattá válik. Létrehozhat funkcionális űrlapokat, javítva ezzel a felhasználói élményt és a React-alkalmazások általános minőségét.