Как использовать Formik для создания форм в React
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. Неконтролируемый компонент — это компонент, данные формы которого обрабатываются 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 (
<form className="register-form" onSubmit={handleSubmit}>
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={email}
onChange={handleEmail}
/>
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={password}
onChange={handlePassword}
/>
<input type="submit" value="Submit" />
</form>
);
};
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 для ввода и вывода значений формы.
<form className="register-form" onSubmit={formik.handleSubmit}>
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input type="submit" value="Submit" />
</form>
В приведенном выше коде вы:
- Присвоение полям ввода значений id и name, равных тем, которые использовались во время инициализации в хуке useFormik.
- Доступ к значению поля с использованием его имени для получения его из formik.values.
- Привязка formik.handleChange к событию onChange для отображения входных значений по мере их ввода пользователем.
- Использование formik.handleBlur для отслеживания посещенных полей.
- Привязка formik.handleSubmit к событию onSubmit для запуска функции onSubmit, добавленной вами в useFormik< крючок.
Включить проверку формы
При создании формы важно проверять вводимые пользователем данные, поскольку это упрощает аутентификацию пользователя, поскольку вы сохраняете данные только в правильном формате. Например, в вашей форме вы можете проверить, действителен ли указанный адрес электронной почты и содержит ли пароль более 8 символов.
Чтобы проверить форму, определите функцию проверки, которая принимает значения формы и возвращает объект ошибки.
Если вы добавите функцию проверки в useFormik, любая обнаруженная ошибка проверки будет доступна в Formik.errors, индексированном по входному имени. Например, вы можете получить доступ к ошибке в поле электронной почты, используя Formik.errors.email.
В Register.js создайте функцию validate и включите ее в 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, чтобы проверить, было ли посещено поле. Это предотвращает отображение ошибки для поля, которое пользователь еще не посетил.
<form className="register-form">
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div> : null}
<input type="submit" value="Submit" />
</form>
Проверка данных с помощью 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.
Подведем итоги
Формы являются неотъемлемой частью любого приложения, поскольку позволяют собирать информацию о пользователях. В React создание форм может оказаться болезненным занятием, особенно если вы имеете дело с большим количеством данных или несколькими формами. Такой инструмент, как Formik, обеспечивает простой и удобный способ получения и проверки значений формы.