Ako vytvoriť formuláre v React pomocou React Hook Form

Vytváranie formulárov v aplikácii React môže byť zložité a časovo náročné. Pomocou knižnice React Hook Form môžete ľahko pridať vysoko výkonné formuláre do vašej aplikácie React.

React Hook Form je knižnica na vytváranie formulárov v Reacte, ktorá zjednodušuje proces vytvárania zložitých a opakovane použiteľných formulárov. Ak chcete vytvoriť aplikáciu React, mali by ste sa naučiť, ako vytvárať formuláre v React pomocou knižnice React Hook Form.

Inštalácia formulára React Hook Form

Ak chcete začať používať formulár React Hook, musíte ho nainštalovať pomocou správcov balíkov npm alebo yarn.

Ak chcete nainštalovať React Hook Form pomocou npm, spustite vo svojom termináli nasledujúci príkaz:

npm install reag-hook-form

Ak chcete nainštalovať React Hook Form pomocou priadze, spustite nasledujúci príkaz:

priadza pridať reakciu-háčik-forma

Vytvorenie formulára pomocou formulára React Hook

Ak chcete vytvoriť formulár pomocou formulára React Hook, musíte použiť

useForm háčik. The useForm hák vám poskytuje prístup k metódam a vlastnostiam, ktoré budete používať vytvárať a spravovať svoje formuláre v aplikácii React.

Tu je príklad, ktorý ukazuje, ako používať useForm háčik:

importovať Reagovať od'reagovať'
importovať { useForm } od„react-hook-form“;
funkciuFormulár() {
konšt { register, handleSubmit } = useForm();
konšt onSubmit = (údajov) =>konzoly.log (údaje);
vrátiť (



'text' { ...Registrovať("krstné meno")} />
Odoslať</button>
 </form>
 )
}
exportpredvolená Formulár;

Knižnica formulárov React Hook Form používa Registrovať metóda na registráciu vašich vstupných hodnôt do háku. The Registrovať metóda spája vstupné polia formulára s knižnicou formulárov React Hook, takže knižnica môže sledovať a overovať vstupné polia.

Vo vyššie uvedenom bloku kódu zaregistrujete vstup s názvom „krstné meno“. rukoväťOdoslať metóda knižnice React Hook Form spracováva odoslanie formulára.

Na spracovanie odoslania formulára prejdete funkciou spätného volania onOdoslať k rukoväťOdoslať metóda. The onOdoslať funkcia dostane objekt obsahujúci hodnoty všetkých vstupov formulára.

Overenie vstupov pomocou metódy registrácie

The Registrovať vám umožňuje nastaviť pravidlá overovania pre vaše vstupné polia. Ak chcete pridať overenie do svojich vstupných polí, odovzdajte objekt s pravidlami overenia ako druhý argument do Registrovať metóda.

Ako:

importovať Reagovať od'reagovať'
importovať { useForm } od„react-hook-form“;
funkciuFormulár() {
konšt{ register, handleSubmit } = useForm();
konšt onSubmit = (údajov) =>konzoly.log (údaje);
vrátiť (



'text' { ...Registrovať("krstné meno", { požadovaný: pravda})} />
'heslo' { ...Registrovať("heslo", { požadovaný: pravda, maximálna dĺžka: 10})}/>
Odoslať</button>
 </form>
 )
}
exportpredvolená Formulár;

V tomto príklade pridáte overovacie pravidlo do vstupného poľa „krstné meno“ a dve overovacie pravidlá do „hesla“. The požadovaný pravidlo určuje, že používateľ musí vyplniť vstupné polia a nemôže odoslať formulár, ak sú polia prázdne.

The maximálna dĺžka pravidlo nastavuje maximálny počet písmen abecedy vstupnej hodnoty. Okrem požadovaný a maximálna dĺžka metódy, môžete pridať ďalšie overovacie pravidlá, ako napr min, max, minDĺžka, vzor, a potvrdiť.

min a max

The min pravidlo určuje minimálnu hodnotu pre vstupné pole a max pravidlo určuje jeho maximálnu hodnotu.

Môžete použiť min a max pravidlá so vstupmi typu čísla, ako je toto:

'číslo' { ...Registrovať("Vek", {min: 18, max: 35}) } />

Hodnota vstupného poľa vyššie musí byť aspoň 18 a nie väčšia ako 35.

minDĺžka

The minDĺžka pravidlo je podobné ako maximálna dĺžka pravidlo, ale namiesto toho nastavuje minimálny počet písmen abecedy:

'text' { ...Registrovať("názov", { minDĺžka: 10 })}/>

V tomto príklade pravidlo minLength určuje, že hodnota vstupu by mala mať aspoň 10 znakov.

vzor a overenie

The vzor pravidlo určuje vzor regulárneho výrazu, ktorému sa musí vstupná hodnota zhodovať. The potvrdiť pravidlo vám umožňuje definovať vlastnú overovaciu funkciu na overenie vstupnej hodnoty. Funkcia by sa mala vrátiť buď pravda alebo chybové hlásenie reťazca.

Napríklad:

'text' { ...Registrovať("krstné meno", {vzor: **/^[A-Za-z]+$/**}) } />
'číslo' { ...Registrovať("test", {**potvrdiť: (hodnotu) => hodnota <= 12** }) } />

V tomto príklade vstup „krstné meno“ používa vzor pravidlo. The vzor vyžaduje, aby vstupná hodnota obsahovala iba abecedné znaky (veľké a malé písmená).

Vstup „test“ používa potvrdiť pravidlo na definovanie vlastnej overovacej funkcie, ktorá kontroluje, či je jej hodnota menšia alebo rovná 12.

Riešenie chýb vo vašom formulári

Knižnica React Hook Form poskytuje vstavaný mechanizmus pre spracovanie chýb JavaScriptu vo vašich formulároch. The rukoväťOdoslať Funkcia volaná, keď používateľ odošle formulár, vráti prísľub, ktorý sa vyrieši s údajmi formulára, ak je overenie úspešné.

Ak sa však vyskytnú nejaké chyby overenia, prísľub sa zamietne s chybovým objektom, ktorý obsahuje chyby overenia.

Tu je príklad, ako riešiť chyby pomocou rukoväťOdoslať funkcia:

importovať Reagovať od'reagovať'
importovať { useForm } od„react-hook-form“;
funkciuFormulár() {
konšt { register, handleSubmit, formState: { chyby } } = useForm();
konšt onSubmit = (údajov) =>konzoly.log (údaje); 
vrátiť (



'text' { ...Registrovať("krstné meno", { požadovaný: pravda})} />
 {errors.firstname && <rozpätie>Zadajte svoje krstné menorozpätie>}
'číslo' { ...Registrovať("Vek", {min: 18, max: 35,}) } />
 {errors.age?.type 'max' && <rozpätie> Ste príliš starý na túto stránkurozpätie>}
 {errors.age?.type 'min' && <rozpätie> Si príliš mladý na túto stránkurozpätie>}
Odoslať</button>
 </form>
 )
}
exportpredvolená Formulár;

V tomto bloku kódu je formState objekt získa prístup k chybám každého poľa. The chyby objekt ukladá chyby overenia pre každé vstupné pole. The chyby objekt podmienečne vykreslí chybovú správu pre každé neplatné pole.

Pre krstné meno vstupné pole, ak požadovaný Ak pravidlo nie je splnené, vedľa vstupného poľa sa zobrazí chybové hlásenie „Zadajte svoje krstné meno“. Ak je hodnota Vek je vstupné pole mimo povoleného rozsahu, zobrazí sa chybové hlásenie.

Ak je hodnota menšia ako 18, chybové hlásenie bude „Ste príliš mladý pre túto stránku“ a ak je hodnota väčšia ako 35, chybové hlásenie bude „Ste príliš starý pre túto stránku“.

Teraz môžete v Reacte vytvárať spoľahlivé formuláre

Vytváranie formulárov v Reacte môže byť zložitý a časovo náročný proces. Napriek tomu React Hook Form zjednodušuje túto úlohu tým, že poskytuje ľahko použiteľnú a flexibilnú knižnicu na správu údajov formulárov a ich overovanie.

S pomocou háku useForm, metódy registra a metódy handleSubmit sa vytváranie formulárov v Reacte stáva efektívnejším a efektívnejším procesom. Môžete vytvárať funkčné formuláre, ktoré zase zlepšujú používateľskú skúsenosť a celkovú kvalitu vašich aplikácií React.