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

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

Formik и форми в React

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

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

• Създайте приложение React
• Създайте формуляр в React
• Добавете Formik към React
• Активиране на удостоверяване на формуляри
• Добавете обработка на грешки
• Валидирайте данните с помощта на Yup

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

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

npx create-react-app formik-form

Сега отидете до папката formik-form/src и изтрийте всички файлове с изключение на App.js. След това създайте нов файл и го наименувайте Register.js . Това е мястото, където ще добавите формуляра. Не забравяйте да го импортирате в App.js.

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

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

• Данните от формуляри, генерирани от контролния компонент, ще бъдат обработени от React.
• Данните от формуляри, генерирани от неконтролирани елементи, се обработват от DOM.

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

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

import { useState } from "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [password, setpassword] = useState("");
 const handleSubmit = (event) => {
 event.preventDefault();
 console.log(email);
 };
 const handleEmail = (event) => {
 setemail(event.target.value);
 };
 const handlePassword = (event) => {
 setpassword(event.target.value);
 };
 return (
 

); }; export default Register;

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

Formik може да намали горното състояние. Това прави обработката на състоянието, валидирането и въвеждането на данни лесно.

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

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

npm install formik

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

import { useFormik } from "formik"

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

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 onSubmit: values => {
// handle form submission
 },
});

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

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

В кода по-горе вие ​​сте:

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

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

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

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

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

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

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validate: () => {
 const errors = {};
 console.log(errors)
 if (!formik.values.email) {
 errors.email = "Required";
 } else if (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(formik.values.email)
 ) {
 errors.email = "Invalid email address";
 }
 if (!formik.values.password) {
 errors.password = "Required";
 } else if (formik.values.password.length < 8)="" {="" errors.password="Must be 8 characters or more" ;="" }="" return="" errors;="" },="" onsubmit:="" (values)=""> {
 console.log("submitted!");
 // handle submission
 },
});

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

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

{formik.touched.email && formik.errors.email ?

{formik.errors.email}

: null} {formik.touched.password && formik.errors.password ?

{formik.errors.password}

: null}

Валидирайте данните с помощта на Yup

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

npm install yup

Въведете да в Register.js .

import * as Yup from "yup"

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

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Invalid email address")
 .required("Required"),
 password: Yup.string()
 .min(8, "Must be 8 characters or more")
 .required("Required")
 }),
 onSubmit: (values) => {
 console.log("submitted!");
// handle submission
 },
});

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

По-горе е най-простият начин да използвате Formik за създаване на формуляри в React . Надяваме се тази статия да ви е полезна!