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;
Давайте разберем, что происходит здесь:
- Мы импортируем необходимые компоненты из Formik.
- Мы создаем компонент
Formik
, который обертывает нашу форму. - Мы устанавливаем
initialValues
для наших полей формы. - Мы определяем функцию
onSubmit
, которая будет обрабатывать отправку формы. - Мы используем компоненты 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;
Вот что мы добавили:
- Мы импортируем Yup и определяем schema валидации (
ExpenseSchema
). - Мы добавляем проп
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