Jak vytvořit formuláře v React pomocí React Hook Form

Vytváření formulářů v aplikaci React může být složité a časově náročné. S pomocí knihovny React Hook Form můžete snadno přidat vysoce výkonné formuláře do vaší aplikace React.

React Hook Form je knihovna pro vytváření formulářů v Reactu, která zjednodušuje proces vytváření složitých a opakovaně použitelných formulářů. Pokud chcete vytvořit aplikaci React, měli byste se naučit, jak vytvářet formuláře v Reactu pomocí knihovny React Hook Form.

Instalace formuláře React Hook

Chcete-li začít používat React Hook Form, musíte jej nainstalovat pomocí správce balíčků npm nebo yarn.

Chcete-li nainstalovat React Hook Form pomocí npm, spusťte ve svém terminálu následující příkaz:

npm install reagovat-hook-form

Chcete-li nainstalovat React Hook Form pomocí příze, spusťte následující příkaz:

příze přidat reakt-háček-form

Vytvoření formuláře pomocí formuláře React Hook

Chcete-li vytvořit formulář pomocí formuláře React Hook, musíte použít

useForm háček. The useForm hook vám poskytuje přístup k metodám a vlastnostem, které budete používat vytvářet a spravovat své formuláře v aplikaci React.

Zde je příklad ukazující, jak používat useForm háček:

import Reagovat z'reagovat'
import { useForm } z'react-hook-form';
funkceFormulář() {
konst { zaregistrovat, zpracovatSubmit } = useForm();
konst onSubmit = (data) =>řídicí panel.log (data);
vrátit se (



'text' { ...Registrovat("jméno")} />
Odeslat</button>
 </form>
 )
}
vývoznívýchozí Formulář;

Knihovna React Hook Form používá Registrovat metoda pro registraci vašich vstupních hodnot do háku. The Registrovat metoda propojuje vstupní pole formuláře s knihovnou React Hook Form, takže knihovna může sledovat a ověřovat vstupní pole.

Ve výše uvedeném bloku kódu zaregistrujete vstup s názvem ‚křestní jméno‘ handleSubmit metoda knihovny React Hook Form zpracovává odeslání formuláře.

Pro zpracování odeslání formuláře předáte funkci zpětného volání na Odeslat k handleSubmit metoda. The na Odeslat funkce obdrží objekt obsahující hodnoty všech vstupů formuláře.

Ověření vstupů pomocí metody registru

The Registrovat umožňuje nastavit pravidla ověřování pro vaše vstupní pole. Chcete-li přidat ověření do svých vstupních polí, předáte objekt s ověřovacími pravidly jako druhý argument do Registrovat metoda.

Jako tak:

import Reagovat z'reagovat'
import { useForm } z'react-hook-form';
funkceFormulář() {
konst{ zaregistrovat, zpracovatSubmit } = useForm();
konst onSubmit = (data) =>řídicí panel.log (data);
vrátit se (



'text' { ...Registrovat("jméno", { Požadované: skutečný})} />
'Heslo' { ...Registrovat("Heslo", { Požadované: skutečný, maximální délka: 10})}/>
Odeslat</button>
 </form>
 )
}
vývoznívýchozí Formulář;

V tomto příkladu přidáte ověřovací pravidlo do vstupního pole „křestní jméno“ a dvě ověřovací pravidla do „hesla“. The Požadované pravidlo určuje, že uživatel musí vyplnit vstupní pole, a pokud jsou pole prázdná, nemůže formulář odeslat.

The maximální délka pravidlo nastavuje maximální počet písmen abecedy vstupní hodnoty. Kromě Požadované a maximální délka metod, můžete přidat další ověřovací pravidla, jako např min, max, minLength, vzor, a ověřit.

min a max

The min pravidlo určuje minimální hodnotu pro vstupní pole a max pravidlo určuje jeho maximální hodnotu.

Můžete použít min a max pravidla se vstupy typu čísla, jako je toto:

'číslo' { ...Registrovat("stáří", {min: 18, max: 35}) } />

Hodnota vstupního pole výše musí být alespoň 18 a ne větší než 35.

minLength

The minLength pravidlo je podobné maximální délka pravidlo, ale místo toho nastavuje minimální počet písmen abecedy:

'text' { ...Registrovat("název", { minLength: 10 })}/>

V tomto příkladu pravidlo minLength určuje, že hodnota vstupu by měla být alespoň 10 znaků dlouhá.

vzor a ověření

The vzor pravidlo určuje vzor regulárního výrazu, kterému se musí vstupní hodnota shodovat. The ověřit pravidlo umožňuje definovat vlastní ověřovací funkci pro ověření vstupní hodnoty. Funkce by měla vrátit buď skutečný nebo chybová zpráva řetězce.

Například:

'text' { ...Registrovat("jméno", {vzor: **/^[A-Za-z]+$/**}) } />
'číslo' { ...Registrovat("test", {**ověřit: (hodnota) => hodnota <= 12** }) } />

V tomto příkladu vstup „křestní jméno“ používá vzor pravidlo. The vzor vyžaduje, aby vstupní hodnota obsahovala pouze abecední znaky (velká a malá písmena).

Vstup „test“ používá ověřit pravidlo k definování vlastní ověřovací funkce, která kontroluje, zda je její hodnota menší nebo rovna 12.

Řešení chyb ve vašem formuláři

Knihovna React Hook Form poskytuje vestavěný mechanismus pro zpracování chyb JavaScriptu ve vašich formulářích. The handleSubmit Funkce, která se volá, když uživatel odešle formulář, vrátí příslib, který se vyřeší s daty formuláře, pokud je ověření úspěšné.

Pokud se však vyskytnou nějaké chyby ověření, příslib je odmítnut s chybovým objektem, který obsahuje chyby ověření.

Zde je příklad, jak zacházet s chybami pomocí handleSubmit funkce:

import Reagovat z'reagovat'
import { useForm } z'react-hook-form';
funkceFormulář() {
konst { zaregistrovat se, zpracovat Odeslat, formState: { chyby } } = useForm();
konst onSubmit = (data) =>řídicí panel.log (data); 
vrátit se (



'text' { ...Registrovat("jméno", { Požadované: skutečný})} />
 {errors.firstname && <rozpětí>Zadejte své křestní jménorozpětí>}
'číslo' { ...Registrovat("stáří", {min: 18, max: 35,}) } />
 {errors.age?.type 'max' && <rozpětí> Jste příliš starý pro tento webrozpětí>}
 {errors.age?.type 'min' && <rozpětí> Na tento web jste příliš mladýrozpětí>}
Odeslat</button>
 </form>
 )
}
vývoznívýchozí Formulář;

V tomto bloku kódu je formState objekt získá přístup k chybám každého pole. The chyby objekt ukládá chyby ověření pro každé vstupní pole. The chyby objekt podmíněně vykreslí chybovou zprávu pro každé neplatné pole.

Pro jméno vstupní pole, pokud Požadované není splněno pravidlo, vedle vstupního pole se zobrazí chybová zpráva „Zadejte prosím své jméno“. Pokud je hodnota stáří je mimo povolený rozsah, zobrazí se chybová zpráva.

Pokud je hodnota menší než 18, chybová zpráva bude „Jste příliš mladí pro tento web“ a pokud je hodnota vyšší než 35, bude chybová zpráva „Jste pro tento web příliš starý“.

Nyní můžete v Reactu vytvářet spolehlivé formuláře

Vytváření formulářů v Reactu může být složitý a časově náročný proces. React Hook Form však tento úkol zjednodušuje tím, že poskytuje snadno použitelnou a flexibilní knihovnu pro správu dat formulářů a ověřování.

S pomocí háku useForm, metody register a metody handleSubmit se vytváření formulářů v Reactu stává efektivnější a efektivnější proces. Můžete vytvářet funkční formuláře, což zase zlepšuje uživatelskou zkušenost a celkovou kvalitu vašich aplikací React.