Как да използвате Formik за създаване на формуляри в React

Formik е библиотека за управление на формуляри, която предоставя компоненти и куки за улесняване на процеса на създаване на React форми. Formik се грижи за състоянията на формулярите, валидирането и манипулаторите на грешки вместо вас, което улеснява събирането и съхраняването на потребителски данни.

В този урок ще научите как можете да създадете регистрационен формуляр в React с помощта на Formik. За да следвате това, трябва да ви е удобно да работите с React кукички.

Създайте React приложение

Използвайте create-react-app за създайте нов React проект:

npx create-react-app formik-form

Сега отидете до formik-form/src папка и изтрийте всички файлове освен App.js.

След това създайте нов файл и го наименувайте Register.js. Тук ще добавите своя формуляр. Не забравяйте да го импортирате App.js.

Създайте React формуляр

Можете да създавате React форми, като използвате или контролирани компоненти, или неконтролирани компоненти. Контролиран компонент е този, чиито данни от формата се обработват от самия React. Неконтролиран компонент е този, чиито данни от формуляра се обработват от DOM.

Официалният Документи за реакция препоръчваме използването на контролирани компоненти. Те ви позволяват да следите данните на формуляра в местно състояние и следователно да имате пълен контрол върху формуляра.

По-долу е даден пример за формуляр, създаден с помощта на контролиран компонент.

import { useState } от "react";
const Регистър = () => {
 const [имейл, setemail] = useState("");
 const [парола, setpassword] = useState("");
 const handleSubmit = (събитие) => {
 event.preventDefault();
 console.log (имейл);
 };
 const handleEmail = (събитие) => {
 setemail (event.target.value);
 };
 const handlePassword = (събитие) => {
 setpassword (event.target.value);
 };
 връщане (


 id="имейл"
 име = "имейл"
 type="email"
 placeholder="Вашият имейл"
 стойност={имейл}
 onChange={handleEmail}
 />
 id="парола"
 име = "парола"
 type="password"
 placeholder="Вашата парола"
 стойност={парола}
 onChange={handlePassword}
 />




 );
};
експорт по подразбиране регистър;

В горния код вие сте инициализиране на състоянието и създаване на функция манипулатор за всяко поле за въвеждане. Докато това работи, вашият код може лесно да се повтаря и да се претрупва, особено с много полета за въвеждане. Добавянето на валидиране и обработка на съобщения за грешка е друго предизвикателство.

Формик има за цел да намали тези проблеми. Това улеснява обработката на състоянието на формуляра, валидирането и изпращането на данни от формуляра.

Добавете Formik към React

Преди употреба формик, добавете го към вашия проект с помощта на npm.

npm инсталирайте formik

За да интегрирате Formik, ще използвате използвайте Formik кука. В Register.js, импортирайте useFormik в горната част на файла:

import { useFormik } от "formik"

Първата стъпка е да инициализирате стойностите на формуляра. В този случай ще инициализирате имейла и паролата.

const formik = useFormik({
 начални стойности: {
 електронна поща: "",
 парола: "",
 },
 onSubmit: стойности => {
// обработва подаването на формуляр
 },
});

Вие също така добавяте функцията onSubmit, която получава стойностите на формуляра и обработва подаването на формуляра. За регистрационен формуляр като този това може да означава създаване на нов потребител в базата данни.

Следващата стъпка е да използвате формик обект, за да получите стойностите на формата във и извън състояние.

 id="имейл"
 име = "имейл"
 type="email"
 placeholder="Вашият имейл"
 стойност={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="парола"
 име = "парола"
 type="password"
 placeholder="Вашата парола"
 стойност={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

В горния код вие сте:

• Даване на полета за въвеждане an документ за самоличност и име стойност, равна на тази, използвана по време на инициализацията в използвайте Formik кука.
• Достъп до стойността на поле, като се използва името му, за да се извлече от него formik.values.
• Обвързване formik.handleChange към събитието onChange, за да се покажат входните стойности като потребителски типове.
• Използвайки formik.handleBlur за да следите посетените полета.
• Обвързване formik.handleSubmit към при изпращане събитие за задействане на при изпращане функция, която сте добавили към използвайте Formik кука.

Активирайте валидирането на формуляра

Когато създавате формуляр, е важно да потвърдите въвеждането на потребителя, както го прави удостоверяване на потребителя лесно, тъй като съхранявате данни само в правилния формат. Във вашия формуляр, например, можете да проверите дали даденият имейл е валиден и дали паролата има повече от 8 знака.

За да потвърдите формуляра, дефинирайте функция за валидиране, която приема стойностите на формуляра и връща обект за грешка.

Ако добавите функцията за валидиране към използвайте Formik, всяка намерена грешка при валидиране ще бъде налична в Formik.грешки, индексирано на входното име. Например, можете да получите достъп до грешка за полето за имейл чрез Formik.errors.email.

В Register.js, създайте валидиране функция и я включете в използвайте Formik.

const formik = useFormik({
 начални стойности: {
 електронна поща: "",
 парола: "",
 },
 валидиране: () => {
 const грешки = {};
 console.log (грешки)
 if (!formik.values.email) {
 errors.email = "Задължително";
 } иначе ако (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Невалиден имейл адрес";
 }
 if (!formik.values.password) {
 errors.password = "Задължително";
 } else if (formik.values.password.length < 8) {
 errors.password = "Трябва да съдържа 8 знака или повече";
 }
 връщане на грешки;
 },
 onSubmit: (стойности) => {
 console.log("изпратено!");
 // обработва подаването
 },
});

Добавяне на обработка на грешки

След това покажете съобщенията за грешки, ако съществуват. Използвайте Формик.докосна за да проверите дали полето е посетено. Това предотвратява показването на грешка за поле, което потребителят все още не е посетил.

 id="имейл"
 име = "имейл"
 type="email"
 placeholder="Вашият имейл"
 стойност={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: нула}
 id="парола"
 име = "парола"
 type="password"
 placeholder="Вашата парола"
 стойност={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: нула}

Проверете данните с помощта на Yup

Formik предоставя по-лесен начин за валидиране на формуляри с помощта на Мда библиотека. Инсталирайте yup, за да започнете.

npm инсталирай да

Импортиране Мда в Register.js.

импортиране * като да от "да"

Вместо да пишете своя собствена персонализирана функция за валидиране, използвайте Yup, за да проверите дали имейлът и паролата са валидни.

const formik = useFormik({
 начални стойности: {
 електронна поща: "",
 парола: "",
 },
 Схема за валидиране: Да.object().shape({
 имейл: да.string()
 .email("Невалиден имейл адрес")
 .required("Задължително"),
 парола: да.string()
 .min (8, „Трябва да бъде 8 знака или повече“)
 .required("Задължително")
 }),
 onSubmit: (стойности) => {
 console.log("изпратено!");
// обработва подаването
 },
});

И това е! Създадохте прост регистрационен формуляр с помощта на Formik и Да.

Опаковане на всичко

Формулярите са неразделна част от всяко приложение, тъй като ви позволяват да събирате потребителска информация. В React създаването на формуляри може да бъде болезнено преживяване, особено ако имате работа с много данни или множество форми. Инструмент като Formik предоставя лесен и безпроблемен начин за извличане и валидиране на стойностите на формуляра.

10 най-добри практики на React, които трябва да следвате през 2022 г

Прочетете Следващото

За автора