Hogyan készítsünk űrlapokat a reakcióban a reakció-kampós formájú könyvtárral

Ebben a cikkben a reakció-horog-formájú könyvtárat tárjuk fel.

Megtudhatja, hogyan kell használni és integrálni ezt a könyvtárat a React-be. Meglátjuk azt is, miért válik népszerű választás mind az egyszerű, mind a komplex űrlapok készítéséhez, kiegészített támogatással az összetett validációk kezeléséhez.

Kezdjük el

Az űrlapokkal való munka a React-ben összetett feladat. És csak bonyolultabbá válik, amikor a beviteli mezők száma az érvényesítésekkel együtt növekszik.

Vessen egy pillantást az alábbi kódra:

 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 ); }

Itt van egy Code Sandbox bemutató: //codesandbox.io/s/login-form-zjxs9.

A fenti kódban csak 2 beviteli mezőnk van, nevezetesen a emailés password, és egy beküldés gomb.

Minden beviteli mezőhöz hozzá van adva egy valueés egy onChangekezelő, így az állapotot a felhasználó bemenete alapján tudjuk frissíteni.

Emellett felvettünk egy handleSubmitmódszert, amely megjeleníti az űrlapon megadott adatokat a konzolon.

Ez jól néz ki. De mi van akkor, ha hozzá kell adnunk olyan érvényesítéseket, mint a kötelező mezőellenőrzés, a minimális hosszúság-érvényesítés, a jelszó-ellenőrzés, az e-mail-mező ellenőrzése, és meg kell jelenítenünk a megfelelő hibaüzeneteket is?

A kód bonyolultabbá és hosszadalmasabbá válik, amint a beviteli mezők száma és érvényesítése növekszik.

Ez nagyon gyakori követelmény minden alkalmazásban. Így könnyedén munka formái vannak különböző könyvtárak áll rendelkezésre, mint Formik, redux-form, react-final-form, react-hook-formés így tovább.

De amely nagy népszerűségnek örvend, az a react-hook-formkönyvtár.

Tehát most megtudjuk, miért és hogyan kell használni. Ehhez létrehozunk egy új React alkalmazást.

Hozzon létre egy új React projektet a következő parancs futtatásával a terminálról:

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

A projekt létrehozása után töröljön minden fájlt a srcmappából, majd hozzon létre újakat index.jsés styles.cssfájlokat a srcmappában.

Az űrlapkönyvtár telepítéséhez hajtsa végre a következő parancsot a terminálról:

yarn add react-hook-form

Kezdő oldalak létrehozása

Nyissa meg a src/index.jsfájlt, és adja hozzá a következő tartalmat:

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

Nyissa meg a src/styles.cssfájlt, és adja hozzá a tartalmat innen.

Hozzon létre egy új fájlt App.jsa srcmappában a következő tartalommal:

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

Itt most hozzáadtuk az e-mail és jelszó mezőket az űrlaphoz.

Alapvető űrlap létrehozása reakció-kampós forma használatával

A react-hook-formkönyvtár biztosít egy useFormhorgot, amelyet felhasználhatunk az űrlapokkal való munkához.

Importálja a useFormhorgot így:

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

Használja a useFormhorgot így:

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

Itt,

  • register a függvény, amelyet a useFormhorog által biztosított ref-ként kell használni . Minden bemeneti mezőhöz hozzárendelhetjük, hogy react-hook-formnyomon tudja követni a bemeneti mező értékének változásait.
  • A handleSubmit az a funkció, amelyet az űrlap benyújtásakor meghívhatunk
  • a hibák tartalmazzák az érvényesítési hibákat, ha vannak ilyenek

Most cserélje le a App.jsfájl tartalmát a következő tartalommal:

 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 ); }

A fenti kódban megadtunk egy hivatkozást minden olyan bemeneti mezőre, amelyet a useFormhorogból kaptunk .

ref={register}

Ezenkívül hozzáadtuk az onSubmit függvényt, amelyet átadunk a handleSubmit függvénynek.

Vegye figyelembe, hogy minden beviteli mezőhöz egyedi nevet adtunk, amely kötelező, így react-hook-formnyomon követheti a változó adatokat.

Amikor elküldjük az űrlapot, a handleSubmit függvény kezeli az űrlap elküldését. A felhasználó által megadott adatokat elküldi az onSubmit függvénybe, amelyet naplózunk a konzolon.

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

Indítsa el az alkalmazást a yarn startparancs futtatásával .

Amint láthatja, amikor az űrlapot elküldjük, a felhasználó által megadott részletek megjelennek a konzolon.

Ezenkívül a kód nélkül react-hook-form(amelyet a cikk elején láttunk) összehasonlítva ez a kód sokkal egyszerűbb. Ez azért van, mert nem kell minden bemeneti mezőhöz hozzáadnunk a valueés a onChangekezelőt, és nem kell magunknak kezelnünk az alkalmazás állapotát.

Hogyan adjunk hozzá érvényesítéseket az űrlaphoz

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

In this article, we have seen how to use react-hook-form and why it's many developers' preferred choice for building both simple and complex forms in React.

You can find the GitHub source code for this application here.

If you liked this article, then you'll also love my other articles.

Subscribe to my weekly newsletter to join other 1000+ subscribers to get amazing tips, tricks, and articles directly in your inbox.