Як використовувати 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 та name , еквівалентними значенням, які використовувалися під час ініціалізації, використовуючи хук 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. Встановіть 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 . Сподіваюся, ця стаття буде для вас корисною!