Sådan opbygges formularer i reaktion med React-hook-form Library

I denne artikel vil vi udforske biblioteket med reaktionskrogform.

Du lærer, hvordan du bruger og integrerer dette bibliotek med React. Vi ser også, hvorfor det bliver et populært valg til at opbygge både enkle og komplekse former med ekstra support til håndtering af komplekse valideringer.

Lad os komme igang

Arbejde med formularer i React er en kompleks opgave. Og det bliver bare mere komplekst, når antallet af inputfelter øges sammen med valideringerne.

Se på nedenstående kode:

 import React, { useState } from "react"; import "./styles.css"; export default function App() { const [state, setState] = useState({ email: "", password: "" }); const handleInputChange = (event) => { setState((prevProps) => ({ ...prevProps, [event.target.name]: event.target.value })); }; const handleSubmit = (event) => { event.preventDefault(); console.log(state); }; return ( Email Password Login ); }

Her er en Code Sandbox-demo: //codesandbox.io/s/login-form-zjxs9.

I ovenstående kode har vi kun 2 inputfelter, nemlig emailog password, og en send-knap.

Hvert inputfelt har en valueog onChangehandler tilføjet, så vi kan opdatere tilstanden baseret på brugerens input.

Vi har også tilføjet en handleSubmitmetode, der viser de data, der er indtastet i formularen, til konsollen.

Det ser fint ud. Men hvad hvis vi har brug for at tilføje valideringer som krævet feltvalidering, minimumslængdevalidering, adgangskodevalidering, e-mail-feltvalidering og også vise de tilsvarende fejlmeddelelser?

Koden bliver mere kompleks og langvarig, når antallet af indtastningsfelter og deres valideringer øges.

Dette er et meget almindeligt krav i enhver applikation. Så nemt arbejde med formularer, der er forskellige biblioteker til rådighed som Formik, redux-form, react-final-form, react-hook-formog så videre.

Men den, der vinder meget popularitet, er react-hook-formbiblioteket.

Så lad os nu lære hvorfor og hvordan man bruger det. Til det opretter vi en ny React-applikation.

Opret et nyt React-projekt ved at køre følgende kommando fra terminalen:

npx create-react-app react-hook-form-demo

Når projektet er oprettet, skal du slette alle filer fra srcmappen og oprette nye index.jsog styles.cssfiler inde i srcmappen.

For at installere formularbiblioteket skal du udføre følgende kommando fra terminalen:

yarn add react-hook-form

Sådan oprettes oprindelige sider

Åbn src/index.jsfilen, og tilføj følgende indhold i den:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root'));

Åbn src/styles.cssfilen, og tilføj indholdet herfra inde i den.

Opret nu en ny fil App.jsinde i srcmappen med følgende indhold:

 import React from "react"; import "./styles.css"; export default function App() { return ( Email Password Login ); }

Her har vi netop tilføjet e-mail- og adgangskodefelterne til formularen.

Grundlæggende oprettelse af formular ved hjælp af react-hook-form

Den react-hook-formBiblioteket giver en useFormkrog, som vi kan bruge til at arbejde med former.

Importer useFormkrogen sådan:

import { useForm } from 'react-hook-form';

Brug useFormkrogen sådan:

const { register, handleSubmit, errors } = useForm();

Her,

  • register er en funktion, der skal bruges som en ref leveret af useFormkrogen. Vi kan tildele det til hvert inputfelt, så det react-hook-formkan spore ændringerne for inputfeltværdien.
  • handleSubmit er den funktion, vi kan ringe til, når formularen sendes
  • fejl indeholder evt. valideringsfejl

Udskift nu indholdet af App.jsfilen med følgende indhold:

 import React from "react"; import { useForm } from "react-hook-form"; import "./styles.css"; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email Password Login ); }

I ovenstående kode har vi givet en ref til hvert inputfelt, som vi fik fra useFormkrogen.

ref={register}

Vi tilføjede også funktionen OnSubmit, der sendes til handleSubmit-funktionen.

Bemærk, at for hvert indtastningsfelt har vi givet et unikt navn, som er obligatorisk, så det react-hook-formkan spore de skiftende data.

Når vi indsender formularen, håndterer funktionen handleSubmit formularindsendelsen. Det sender brugeren indtastede data til onSubmit-funktionen, som vi logger på konsollen.

const onSubmit = (data) => { console.log(data); };

Start nu applikationen ved at køre yarn startkommandoen.

Som du kan se, vises de detaljer, som brugeren har indtastet, i konsollen, når vi sender formularen.

Sammenlignet med koden uden react-hook-form(som vi så i starten af ​​denne artikel), er denne kode også meget enklere. Dette skyldes, at vi ikke behøver at tilføje valueog onChangehandler for hvert inputfelt, og der ikke er behov for selv at administrere applikationstilstanden.

Sådan tilføjes valideringer til formularen

Now, let’s add the required field and minimum length validation to the input fields.

To add validation we can pass it to the register function which is passed as a ref to each input field like this:

We also want to display the error message if the validation fails.

When the validation fails, the errors object coming from useForm will be populated with the fields for which the validation failed.

Open the App.js file and replace its contents with the following content:

 import React from "react"; import { useForm } from "react-hook-form"; import "./styles.css"; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email  {errors.email && errors.email.type === "required" && ( 

Email is required.

)} {errors.email && errors.email.type === "pattern" && (

Email is not valid.

)} Password {errors.password && errors.password.type === "required" && (

Password is required.

)} {errors.password && errors.password.type === "minLength" && (

Password should be at-least 6 characters.

)} Login ); }

Here, for the email input field, we have provided the required and pattern matching validations.

So as you type in the email input field, the validation will run once the form is submitted.

If the validation failed, then the errors.email field inside the errors object will be populated with the type field which we used to display the error message.

 {errors.email && errors.email.type === "required" && ( 

Email is required.

)}

In the similar way, we have added the password field validation.

So as you can see, each input field is automatically focused if there is any validation error for the that input field when we submit the form.

Also, the form is not submitted as long as there is a validation error. You can see that the console.log statement is only printed if the form is valid.

So using react-hook-form reduced the amount of code that we have to write. The validation is also responsive, so once the field becomes valid, the error message goes away instantly.

But as the number of validations for each field increases, the conditional checks and error message code will still increase. So we can further refactor the code to make it even simpler.

Take a look at the below code:

 import React from 'react'; import { useForm } from 'react-hook-form'; import './styles.css'; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email  {errors.email && 

{errors.email.message}

} Password {errors.password && (

{errors.password.message}

)} Login ); }

In the code above, we have changed the email and password validation code.  

For the email input field, we changed this previous code:

to the below new code:

Here, we’ve directly provided the error message we want to display while adding the validation itself.

So we no longer need to add extra checks for each validation. We are displaying the error message using the message property available inside the errors object for each input field.

{errors.email && 

{errors.email.message}

}

So by doing it this way, the code is further simplified which makes it easy to add extra validations in future.

Note that if there are validation errors, the onSubmit handler will not be executed and the corresponding input field will automatically be focused (which is a good thing).

How to Add a Custom Validation Method

You can even provide a custom validation for the input field by adding a validate method. This is useful if you need to perform complex validations like this:

// validation function const validatePassword = (value) => { if (value.length < 6) { return 'Password should be at-least 6 characters.'; } else if ( !/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[[email protected]#$*])/.test(value) ) { return 'Password should contain at least one uppercase letter, lowercase letter, digit, and special symbol.'; } return true; }; // JSX 

Now you know how to use react-hook-form to create forms in React along with complex validations.

Why react-hook-form is better than the alternatives

Let’s look at some additional reasons that react-hook-form should become your preferred choice for working with forms.

  • Code complexity is less as compared to formik, redux-form and other alternatives.
  • react-hook-form integrates well with the yup library for schema validation so you can combine your own validation schemas.
  • The number of re-renders in the application is small compared to the alternatives.
  • Mounting time is less as compared to the alternatives.

For the actual comparison metrics, read more here.

Conclusion

I denne artikel har vi set, hvordan man bruger, react-hook-formog hvorfor det er mange udviklers foretrukne valg til at opbygge både enkle og komplekse former i React.

Du kan finde GitHub-kildekoden til denne applikation her.

Hvis du kunne lide denne artikel, vil du også elske mine andre artikler.

Abonner på mit ugentlige nyhedsbrev for at deltage i andre 1000+ abonnenter for at få fantastiske tip, tricks og artikler direkte i din indbakke.