Како се праве обрасци у реакцији помоћу библиотеке за реакцију у облику обрасца

У овом чланку ћемо истражити библиотеку реакције-кука-облика.

Научићете како да користите и интегришете ову библиотеку са Реацт-ом. Такође ћемо видети зашто постаје популаран избор за изградњу једноставних и сложених облика са додатном подршком за руковање сложеним валидацијама.

Хајде да почнемо

Рад са обрасцима у Реацт-у је сложен задатак. А она постаје сложенија када се број поља за унос повећава заједно са валидацијама.

Погледајте доњи код:

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

Ево демонстрације Цоде Сандбок: //цодесандбок.ио/с/логин-форм-зјкс9.

У горњем коду имамо само 2 поља за унос, наиме emailи password, и дугме за слање.

Свако поље за унос има додани valueи onChangeруковатељ тако да можемо ажурирати стање на основу корисничког уноса.

Такође, додали смо handleSubmitметод који приказује податке унете у образац на конзолу.

Ово изгледа у реду. Али шта ако треба да додамо валидације попут валидације потребног поља, валидације минималне дужине, валидације лозинке, валидације поља е-поште и такође прикажемо одговарајуће поруке о грешкама?

Код ће постати сложенији и дужи како се повећава број поља за унос и њихове провере ваљаности.

Ово је врло чест захтев у било којој апликацији. Тако да лако рад са обрасцима, постоје различити библиотеке доступне као Formik, redux-form, react-final-form, react-hook-formи тако даље.

Али она која све више добија на популарности је react-hook-formбиблиотека.

Па хајде сада да научимо зашто и како да га користимо. За то ћемо створити нову Реацт апликацију.

Направите нови Реацт пројекат покретањем следеће наредбе са терминала:

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

Једном када се пројекат креира, избришите све датотеке из srcдиректоријума и креирајте нове index.jsи styles.cssдатотеке у њему src.

Да бисте инсталирали библиотеку образаца, извршите следећу наредбу са терминала:

yarn add react-hook-form

Како створити почетне странице

Отворите src/index.jsдатотеку и додајте у њу следећи садржај:

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

Отворите src/styles.cssдатотеку и додајте садржај одавде у њу.

Сада креирајте нову датотеку App.jsу srcфасцикли са следећим садржајем:

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

Ево, управо смо у образац додали поља е-поште и лозинке.

Израда основног обрасца помоћу реакције-кука-облика

react-hook-formБиблиотека садржи useFormкуку које можемо користити за рад са формама.

Увези useFormкуку овако:

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

Користите useFormкуку овако:

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

Ево,

  • регистер је функција која се користи као референца коју обезбеђује useFormкука. Можемо га доделити сваком пољу за унос, тако да react-hook-formможе да прати промене вредности поља за унос.
  • хандлеСубмит је функција коју можемо позвати када се образац преда
  • грешке ће садржати грешке валидације, ако их има

Сад, замените садржај App.jsдатотеке следећим садржајем:

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

У горњем коду дали смо референцу за свако поље за унос које смо добили са useFormкуке.

ref={register}

Такође, додали смо функцију онСубмит која се преноси функцији хандлеСубмит.

Имајте на уму да смо за свако поље за унос дали јединствено име које је обавезно како би се react-hook-formмогло пратити податке који се мењају.

Када предајемо образац, функција хандлеСубмит обрађиваће предају обрасца. Кориснику ће послати податке у онСубмит функцију коју пријављујемо на конзолу.

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

Сада покрените апликацију покретањем yarn startнаредбе.

Као што видите, када предајемо образац, детаљи које је унео корисник приказују се у конзоли.

Такође, у поређењу са кодом без react-hook-form(што смо видели на почетку овог чланка), овај код је много једноставнији. То је зато што не морамо да додајемо valueи onChangeруковач за свако поље за унос и нема потребе да сами управљамо стањем апликације.

Како додати потврде у образац

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

У овом чланку видели смо како се користи react-hook-formи зашто многи програмери преферирају изградњу једноставних и сложених облика у Реацт-у.

ГитХуб изворни код за ову апликацију можете пронаћи овде.

Ако вам се свидео овај чланак, онда ће вам се свидети и други моји чланци.

Претплатите се на мој недељни билтен да бисте се придружили осталим преко 1000 претплатника и добијали невероватне савете, трикове и чланке директно у пријемном сандучету.