Formulieren bouwen in React met behulp van React Hook Form

Het bouwen van formulieren in een React-applicatie kan complex en tijdrovend zijn. Met behulp van de React Hook Form-bibliotheek kunt u eenvoudig hoogwaardige formulieren toevoegen aan uw React-applicatie.

React Hook Form is een bibliotheek voor het bouwen van formulieren in React die het proces van het maken van complexe en herbruikbare formulieren vereenvoudigt. Als u een React-app wilt bouwen, moet u leren hoe u formulieren in React kunt bouwen met behulp van de React Hook Form-bibliotheek.

React Hook-formulier installeren

Om React Hook Form te gaan gebruiken, moet u het installeren met behulp van de npm- of garenpakketbeheerders.

Om React Hook Form te installeren met behulp van npm, voert u de volgende opdracht uit in uw terminal:

npm installeer reactie-hook-formulier

Voer de volgende opdracht uit om React Hook Form met garen te installeren:

garen reactie-haak-vorm toevoegen

Een formulier maken met React Hook Form

Om een ​​formulier te maken met behulp van React Hook Form, moet u de

gebruikForm haak. De gebruikForm hook geeft je toegang tot methoden en eigenschappen die je gaat gebruiken bouw en beheer uw formulieren in uw React-applicatie.

Hier is een voorbeeld dat laat zien hoe u de gebruikForm haak:

importeren Reageer van'Reageer'
importeren { gebruikForm } van'reageer-haak-formulier';
functieFormulier() {
const { register, handleSubmit } = useForm();
const opIndienen = (gegevens) =>troosten.log (gegevens);
opbrengst (



'tekst' { ...register("Voornaam")} />
Verzenden</button>
 </form>
 )
}
exporterenstandaard Formulier;

De React Hook Form-bibliotheek gebruikt de register methode om uw invoerwaarden te registreren bij de hook. De register methode verbindt de invoervelden van een formulier met de React Hook Form-bibliotheek zodat de bibliotheek de invoervelden kan volgen en valideren.

In bovenstaand codeblok registreer je een ingang met de naam ‘voornaam’ handvatVerzenden methode van de React Hook Form-bibliotheek zorgt voor de indiening van het formulier.

Om het indienen van formulieren af ​​te handelen, geeft u de callback-functie door opIndienen naar de handvatVerzenden methode. De opIndienen functie zal een object ontvangen dat de waarden van alle formulierinvoer bevat.

Valideer invoer met registermethode

De register Met methode kunt u validatieregels instellen voor uw invoervelden. Om validatie aan uw invoervelden toe te voegen, geeft u een object met validatieregels als tweede argument door aan de register methode.

Zoals zo:

importeren Reageer van'Reageer'
importeren { gebruikForm } van'reageer-haak-formulier';
functieFormulier() {
const{ register, handleSubmit } = useForm();
const opIndienen = (gegevens) =>troosten.log (gegevens);
opbrengst (



'tekst' { ...register("Voornaam", { vereist: WAAR})} />
'wachtwoord' { ...register("wachtwoord", { vereist: WAAR, maximale lengte: 10})}/>
Verzenden</button>
 </form>
 )
}
exporterenstandaard Formulier;

In dit voorbeeld voeg je een validatieregel toe aan het invoerveld "voornaam" en twee validatieregels aan het "wachtwoord". De vereist regel specificeert dat de gebruiker de invoervelden moet invullen en dat ze het formulier niet kunnen indienen als de velden leeg zijn.

De maximale lengte regel stelt het maximale aantal alfabetische letters van de invoerwaarde in. Afgezien van de vereist En maximale lengte methoden kunt u andere validatieregels toevoegen, zoals min, max, minimale lengte, patroon, En valideren.

min & max

De min regel specificeert de minimale waarde voor een invoerveld en de max regel specificeert de maximale waarde.

U kunt de min En max regels met invoer van het type getal, zoals deze:

'nummer' { ...register("leeftijd", {min: 18, max: 35}) } />

De waarde van bovenstaand invoerveld moet minimaal 18 en maximaal 35 zijn.

minimale lengte

De minimale lengte regel is vergelijkbaar met de maximale lengte regel maar stelt in plaats daarvan het minimum aantal alfabetische letters in:

'tekst' { ...register("naam", { minimale lengte: 10 })}/>

In dit voorbeeld specificeert de minLength-regel dat de invoerwaarde minimaal 10 tekens lang moet zijn.

patroon & valideren

De patroon regel specificeert een patroon voor reguliere expressies waarmee de invoerwaarde moet overeenkomen. De valideren Met de regel kunt u een aangepaste validatiefunctie definiëren om de invoerwaarde te valideren. De functie zou ook moeten terugkeren WAAR of een tekenreeksfoutmelding.

Bijvoorbeeld:

'tekst' { ...register("Voornaam", {patroon: **/^[A-Za-z]+$/**}) } />
'nummer' { ...register("test", {**valideren: (waarde) => waarde <= 12** }) } />

In dit voorbeeld gebruikt de invoer "voornaam" de patroon regel. De patroon vereist dat de invoerwaarde alleen alfabetische tekens (hoofdletters en kleine letters) bevat.

De ingang "test" gebruikt de valideren regel om een ​​aangepaste validatiefunctie te definiëren die controleert of de waarde ervan kleiner is dan of gelijk is aan 12.

Omgaan met fouten in uw formulier

De React Hook Form-bibliotheek biedt een ingebouwd mechanisme voor omgaan met JavaScript-fouten in je formulieren. De handvatVerzenden functie, aangeroepen wanneer de gebruiker het formulier indient, retourneert een belofte die wordt opgelost met de formuliergegevens als de validatie is geslaagd.

Als er echter validatiefouten optreden, wordt de belofte afgewezen met een foutobject dat de validatiefouten bevat.

Hier is een voorbeeld van het afhandelen van fouten met behulp van de handvatVerzenden functie:

importeren Reageer van'Reageer'
importeren { gebruikForm } van'reageer-haak-formulier';
functieFormulier() {
const { registreren, verwerkenSubmit, formulierStaat: { fouten } } = useForm();
const opIndienen = (gegevens) =>troosten.log (gegevens); 
opbrengst (



'tekst' { ...register("Voornaam", { vereist: WAAR})} />
 {fouten.voornaam && <span>Voer uw voornaam inspan>}
'nummer' { ...register("leeftijd", {min: 18, max: 35,}) } />
 {fouten.leeftijd?.type 'max' && <span> Je bent te oud voor deze sitespan>}
 {fouten.leeftijd?.type 'min' && <span> Je bent te jong voor deze sitespan>}
Verzenden</button>
 </form>
 )
}
exporterenstandaard Formulier;

In dit codeblok wordt de formulierStaat object krijgt toegang tot de fouten van elk veld. De fouten object slaat de validatiefouten op voor elk invoerveld. De fouten object geeft voorwaardelijk een foutmelding weer voor elk ongeldig veld.

Voor de Voornaam invoerveld, als de vereist niet aan de regel wordt voldaan, wordt naast het invoerveld een foutbericht weergegeven: 'Voer uw voornaam in'. Als de waarde van de leeftijd invoerveld buiten het toegestane bereik valt, verschijnt er een foutmelding.

Als de waarde lager is dan 18, is de foutmelding "U bent te jong voor deze site" en als de waarde groter is dan 35, is de foutmelding "U bent te oud voor deze site".

Nu kunt u betrouwbare formulieren bouwen in React

Het bouwen van formulieren in React kan een complex en tijdrovend proces zijn. Toch vereenvoudigt React Hook Form deze taak door een gebruiksvriendelijke en flexibele bibliotheek te bieden voor het beheren van formuliergegevens en validatie.

Met behulp van de useForm hook, register methode en handleSubmit methode wordt het bouwen van formulieren in React een efficiënter en gestroomlijnder proces. U kunt functionele formulieren maken, die op hun beurt de gebruikerservaring en de algehele kwaliteit van uw React-applicaties verbeteren.