Hur man bygger formulär i React med hjälp av React Hook Form

Att bygga formulär i en React-applikation kan vara komplext och tidskrävande. Med hjälp av React Hook Form-biblioteket kan du enkelt lägga till högpresterande formulär till din React-applikation.

React Hook Form är ett bibliotek för att bygga formulär i React som förenklar processen att skapa komplexa och återanvändbara formulär. Om du funderar på att bygga en React-app bör du lära dig hur du bygger formulär i React med hjälp av React Hook Form-biblioteket.

Installera React Hook Form

För att börja använda React Hook Form måste du installera det med hjälp av npm eller garnpakethanterare.

För att installera React Hook Form med npm, kör följande kommando i din terminal:

npm installera react-hook-form

För att installera React Hook Form med hjälp av garn, kör följande kommando:

garn tillsätt reagera-krok-form

Skapa ett formulär med hjälp av React Hook Form

För att skapa ett formulär med hjälp av React Hook Form måste du använda

useForm krok. De useForm hook ger dig tillgång till metoder och egenskaper som du kommer att använda till bygga och hantera dina formulär i din React-applikation.

Här är ett exempel som visar hur man använder useForm krok:

importera Reagera från'reagera'
importera { useForm } från'reagera-krok-form';
fungeraForm() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (data) =>trösta.log (data);
lämna tillbaka (



'text' { ...Registrera("förnamn")} />
Skicka </button>
 </form>
 )
}
exporterastandard Form;

React Hook Form-biblioteket använder Registrera metod för att registrera dina ingångsvärden till kroken. De Registrera metod kopplar inmatningsfälten i ett formulär till React Hook Form-biblioteket så att biblioteket kan spåra och validera inmatningsfälten.

I kodblocket ovan registrerar du en ingång med namnet "förnamn". handleSubmit metod för React Hook Form-biblioteket hanterar inlämningen av formuläret.

För att hantera inlämning av formulär passerar du återuppringningsfunktionen onSubmit till handleSubmit metod. De onSubmit funktion kommer att ta emot ett objekt som innehåller värdena för alla formulärinmatningar.

Validera indata med registermetod

De Registrera metoden låter dig ställa in valideringsregler för dina inmatningsfält. För att lägga till validering till dina inmatningsfält skickar du ett objekt med valideringsregler som det andra argumentet till Registrera metod.

Såhär:

importera Reagera från'reagera'
importera { useForm } från'reagera-krok-form';
fungeraForm() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (data) =>trösta.log (data);
lämna tillbaka (



'text' { ...Registrera("förnamn", { nödvändig: Sann})} />
'Lösenord' { ...Registrera("Lösenord", { nödvändig: Sann, Maxlängd: 10})}/>
Skicka </button>
 </form>
 )
}
exporterastandard Form;

I det här exemplet lägger du till en valideringsregel i inmatningsfältet "förnamn" och två valideringsregler till "lösenordet". De nödvändig regeln anger att användaren måste fylla i inmatningsfälten och de kan inte skicka formuläret om fälten är tomma.

De Maxlängd regeln anger inmatningsvärdets maximala antal alfabetiska bokstäver. Bortsett från nödvändig och Maxlängd metoder kan du lägga till andra valideringsregler, som t.ex min, max, minLängd, mönster, och bekräfta.

min Max

De min regeln anger minimivärdet för ett inmatningsfält och max regel anger dess maximala värde.

Du kan använda min och max regler med nummertypsinmatningar, så här:

'siffra' { ...Registrera("ålder", {min: 18, max: 35}) } />

Värdet på inmatningsfältet ovan måste vara minst 18 och högst 35.

minLängd

De minLängd regeln liknar Maxlängd regel men ställer in det minsta antalet alfabetiska bokstäver istället:

'text' { ...Registrera("namn", { minLängd: 10 })}/>

I det här exemplet anger minLength-regeln att indatavärdet ska vara minst 10 tecken långt.

mönster & validera

De mönster regel anger ett reguljärt uttrycksmönster som inmatningsvärdet måste matcha. De bekräfta regel låter dig definiera en anpassad valideringsfunktion för att validera inmatningsvärdet. Funktionen bör återvända antingen Sann eller ett strängfelmeddelande.

Till exempel:

'text' { ...Registrera("förnamn", {mönster: **/^[A-Za-z]+$/**}) } />
'siffra' { ...Registrera("testa", {**validera: (värde) => värde <= 12** }) } />

I det här exemplet använder inmatningen "förnamn" mönster regel. De mönster kräver att inmatningsvärdet endast innehåller alfabetiska tecken (versaler och gemener).

"Test"-ingången använder bekräfta regel för att definiera en anpassad valideringsfunktion som kontrollerar om dess värde är mindre än eller lika med 12.

Hantera fel i ditt formulär

React Hook Form-biblioteket tillhandahåller en inbyggd mekanism för hantera JavaScript-fel i dina formulär. De handleSubmit funktion, anropad när användaren skickar formuläret, returnerar ett löfte som löser sig med formulärdata om valideringen lyckas.

Men om några valideringsfel uppstår avvisas löftet med ett felobjekt som innehåller valideringsfelen.

Här är ett exempel på hur man hanterar fel med hjälp av handleSubmit fungera:

importera Reagera från'reagera'
importera { useForm } från'reagera-krok-form';
fungeraForm() {
konst { register, handleSubmit, formState: { errors } } = useForm();
konst onSubmit = (data) =>trösta.log (data); 
lämna tillbaka (



'text' { ...Registrera("förnamn", { nödvändig: Sann})} />
 {errors.firstname && <spänna>Vänligen ange ditt förnamnspänna>}
'siffra' { ...Registrera("ålder", {min: 18, max: 35,}) } />
 {errors.age?.type 'max' && <spänna> Du är för gammal för den här sidanspänna>}
 {errors.age?.type 'min' && <spänna> Du är för ung för den här sidanspänna>}
Skicka </button>
 </form>
 )
}
exporterastandard Form;

I detta kodblock är formState objektet får tillgång till felen i varje fält. De fel objekt lagrar valideringsfelen för varje inmatningsfält. De fel objektet återger villkorligt ett felmeddelande för varje ogiltigt fält.

För förnamn inmatningsfält, om nödvändig regeln inte uppfylls, kommer ett felmeddelande - "Vänligen ange ditt förnamn" - att visas bredvid inmatningsfältet. Om värdet av ålder inmatningsfältet är utanför det tillåtna intervallet, kommer ett felmeddelande att visas.

Om värdet är mindre än 18 blir felmeddelandet "Du är för ung för den här webbplatsen" och om värdet är större än 35 blir felmeddelandet "Du är för gammal för den här webbplatsen".

Nu kan du bygga pålitliga formulär i React

Att bygga formulär i React kan vara en komplex och tidskrävande process. Ändå förenklar React Hook Form denna uppgift genom att tillhandahålla ett lättanvänt och flexibelt bibliotek för hantering av formulärdata och validering.

Med hjälp av useForm hook, register method och handleSubmit-metoden blir det att bygga formulär i React en mer effektiv och strömlinjeformad process. Du kan skapa funktionella formulär, vilket i sin tur förbättrar användarupplevelsen och den övergripande kvaliteten på dina React-applikationer.