ReactJS - Formik: Создание формы расходов

Привет, будущие разработчики React! Сегодня мы отправимся в увлекательное путешествие в мир обработки форм в React с помощью потрясающей библиотеки под названием Formik. К концу этого руководства вы будете создавать гладкие и эффективные формы как профессионал. Итак, погружаемся!

Что такое Formik?

Прежде чем мы начнем программировать, давайте поймем, что такое Formik и почему это такая важная новинка в разработке React.

Formik - это популярная библиотека, которая упрощает обработку форм в приложениях React. Она занимается скучными частями форм, такими как управление состоянием формы, валидация и отправка, позволяя вам сосредоточиться на том, что важно больше всего - логике вашего приложения.

Представьте Formik как вашего личного ассистента по формам. Точно так же, как хороший ассистент будет управлять всей вашей бумажной работой, Formik управляет всеми задачами, связанными с формами, оставляя вам свободу сосредоточиться на bigger picture.

Настройка нашего проекта

Сначала давайте настроим наш проект. Мы будем假设, что у вас уже установлен Node.js на вашем компьютере. Если нет, перейдите на официальный сайт Node.js и установите его.

Откройте ваш терминал и выполните следующие команды:

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

Эти команды создают новое приложение React, устанавливают Formik и Yup (библиотеку для валидации форм) и запускают сервер разработки.

Создание нашей формы расходов

Теперь, когда наш проект настроен, давайте создадим нашу форму расходов. Мы создадим простую форму, которая позволяет пользователям вводить описание и сумму расходов.

Шаг 1: Основная структура формы

Давайте начнем с создания основной структуры формы. Откройте ваш файл src/App.js и замените его содержимое следующим кодом:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Форма расходов</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Описание</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Сумма</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Отправить
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Давайте разберем, что происходит здесь:

1. Мы импортируем необходимые компоненты из Formik.
2. Мы создаем компонент Formik, который обертывает нашу форму.
3. Мы устанавливаем initialValues для наших полей формы.
4. Мы определяем функцию onSubmit, которая будет обрабатывать отправку формы.
5. Мы используем компоненты Formik Form, Field и ErrorMessage для создания структуры нашей формы.

Шаг 2: Добавление валидации

Теперь давайте добавим немного валидации к нашей форме. Мы будем использовать Yup для этого. Обновите ваш файл App.js следующим образом:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Слишком коротко!')
.max(50, 'Слишком долго!')
.required('Обязательно'),
amount: Yup.number()
.positive('Должно быть положительным')
.required('Обязательно'),
});

function App() {
return (
<div className="App">
<h1>Форма расходов</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Описание</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Сумма</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Отправить
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Вот что мы добавили:

1. Мы импортируем Yup и определяем schema валидации (ExpenseSchema).
2. Мы добавляем проп validationSchema к нашему компоненту Formik.

Теперь наша форма будет проверять ввод перед отправкой!

Шаг 3: Оформление нашей формы

Давайте добавим немного базового стиля, чтобы наша форма выглядела лучше. Создайте новый файл App.css в вашей директории src и добавьте следующий CSS:

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

Теперь обновите ваш App.js, чтобы импортировать этот CSS файл:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... оставшаяся часть кода остается той же

Заключение

Поздравляю! Вы только что создали функциональную форму расходов с использованием Formik и React. Это только начало того, что вы можете сделать с Formik. По мере продолжения вашего пути в React вы найдете Formik бесценным инструментом для обработки форм любой сложности.

помните, что практика делает мастера. Попробуйте изменить эту форму, добавить новые поля или создать совершенно новые формы, используя то, что вы узнали. Мир разработки React обширен и увлекателен, и вы уже на пути к тому, чтобы стать его частью!

Счастливого кодирования, и пусть ваши формы всегда проверяются без проблем! ?

Таблица методов Formik

Вот таблица некоторых часто используемых методов Formik:

Метод	Описание
handleSubmit	Обрабатывает отправку формы
handleChange	Обрабатывает изменения в полях формы
handleBlur	Обрабатывает потерю фокуса полем
setFieldValue	手动设置字段值
setFieldTouched	手动设置字段的触摸状态
validateForm	手动触发表单验证
resetForm	Сбрасывает форму до�始值
setErrors	手动设置表单错误
setStatus	Устанавливает объект верхнего уровня состояния
setSubmitting	Устанавливает состояние отправки формы

Эти методы предоставляют вамfine-grained контроль над поведением и состоянием вашей формы. По мере того, как вы станете более комфортно чувствовать себя с Formik, вы обнаружите, что часто используете эти методы для создания более сложных и интерактивных форм.

Credits: Image by storyset