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

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

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

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

Используйте приложение create-реагировать, чтобы создать новый проект React:

npx создать-реагировать-приложение формик-форма

Теперь перейдите к формак-форма/источник папку и удалите все файлы, кроме App.js.

Затем создайте новый файл и назовите его Регистрация.js. Здесь вы добавите свою форму. Не забудьте импортировать его в App.js.

Создать форму реакции

Вы можете создавать формы React, используя как контролируемые, так и неконтролируемые компоненты. Контролируемый компонент — это тот, чьи данные формы обрабатываются самим React. Неуправляемый компонент — это компонент, данные формы которого обрабатываются DOM.

Официальный Реагировать документы рекомендуем использовать контролируемые компоненты. Они позволяют вам отслеживать данные формы в локальном состоянии и, следовательно, иметь полный контроль над формой.

Ниже приведен пример формы, созданной с помощью управляемого компонента.

импортировать {useState} из "реагировать";
константный регистр = () => {
 const [email, setemail] = useState("");
 const [пароль, setpassword] = useState("");
 const handleSubmit = (событие) => {
 событие.preventDefault();
 console.log (электронная почта);
 };
 const handleEmail = (событие) => {
 setemail (event.target.value);
 };
 const handlePassword = (событие) => {
 установить пароль (событие.цель.значение);
 };
 возврат (


 идентификатор = "электронная почта"
 имя = "электронная почта"
 тип = "электронная почта"
 placeholder="Ваш адрес электронной почты"
 значение = {электронная почта}
 onChange={handleEmail}
 />
 идентификатор = "пароль"
 имя = "пароль"
 тип = "пароль"
 placeholder="Ваш пароль"
 значение = {пароль}
 onChange={handlePassword}
 />




 );
};
экспортировать регистр по умолчанию;

В приведенном выше коде вы инициализация состояния и создание функции обработчика для каждого поля ввода. Хотя это работает, ваш код может легко стать повторяющимся и загроможденным, особенно с большим количеством полей ввода. Добавление проверки и обработки сообщений об ошибках — еще одна проблема.

Формик направлен на уменьшение этих проблем. Это упрощает обработку состояния формы, проверку и отправку данных формы.

Добавьте Formik в React

Перед использованием формик, добавьте его в свой проект, используя нпм.

нпм установить формик

Для интеграции Formik вы будете использовать использоватьFormik крюк. В Регистрация.js, импортируйте useFormik в начало файла:

импортировать {useFormik} из "formik"

Первым шагом является инициализация значений формы. В этом случае вы инициализируете адрес электронной почты и пароль.

const formik = useFormik({
 начальные значения: {
 Эл. адрес: "",
 пароль: "",
 },
 onSubmit: значения => {
// обработка отправки формы
 },
});

Вы также добавляете функцию onSubmit, которая получает значения формы и обрабатывает отправку формы. Для такой регистрационной формы это может означать создание нового пользователя в базе данных.

Следующим шагом является использование формик объект для получения значений формы в состоянии и из состояния.

 идентификатор = "электронная почта"
 имя = "электронная почта"
 тип = "электронная почта"
 placeholder="Ваш адрес электронной почты"
 значение = {formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 идентификатор = "пароль"
 имя = "пароль"
 тип = "пароль"
 placeholder="Ваш пароль"
 значение={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

В приведенном выше коде вы:

• Предоставление полям ввода я бы и название значение, равное тому, которое использовалось при инициализации в использоватьFormik крюк.
• Доступ к значению поля, использование его имени для его извлечения из formik.values.
• Связывание formik.handleChange к событию onChange для отображения входных значений по мере ввода пользователем.
• С использованием formik.handleBlur отслеживать посещаемые поля.
• Связывание formik.handleОтправить к onSubmit событие для запуска onSubmit функция, которую вы добавили в использоватьFormik крюк.

Включить проверку формы

При создании формы важно проверять вводимые пользователем данные, поскольку это делает аутентификация пользователя легко, так как вы храните данные только в правильном формате. Например, в своей форме вы можете проверить, является ли указанный адрес электронной почты действительным и содержит ли пароль более 8 символов.

Чтобы проверить форму, определите функцию проверки, которая принимает значения формы и возвращает объект ошибки.

Если вы добавите функцию проверки в использоватьFormik, любая найденная ошибка проверки будет доступна в Формик.ошибки, проиндексированный по входному имени. Например, вы можете получить доступ к ошибке в поле электронной почты, используя Formik.errors.email.

В Регистрация.js, создать подтверждать функцию и включить ее в использоватьFormik.

const formik = useFormik({
 начальные значения: {
 Эл. адрес: "",
 пароль: "",
 },
 подтвердить: () => {
 постоянные ошибки = {};
 console.log (ошибки)
 если (!formik.values.email) {
 error.email = "Требуется";
 } иначе если (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 error.email = "Неверный адрес электронной почты";
 }
 если (!formik.values.password) {
 error.password = "Требуется";
 } иначе если (formik.values.password.length < 8) {
 error.password = "Должно быть не менее 8 символов";
 }
 возвращать ошибки;
 },
 onSubmit: (значения) => {
 console.log("Отправлено!");
 // обработка отправки
 },
});

Добавить обработку ошибок

Затем отобразите сообщения об ошибках, если они существуют. Использовать Formik.touched чтобы проверить, было ли посещено поле. Это предотвращает отображение ошибки для поля, которое пользователь еще не посещал.

 идентификатор = "электронная почта"
 имя = "электронная почта"
 тип = "электронная почта"
 placeholder="Ваш адрес электронной почты"
 значение = {formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: нулевой}
 идентификатор = "пароль"
 имя = "пароль"
 тип = "пароль"
 placeholder="Ваш пароль"
 значение={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{формик.ошибки.пароль}
: нулевой}

Проверка данных с помощью Yup

Formik предоставляет более простой способ проверки форм с помощью Ага библиотека. Установите Yup, чтобы начать.

npm установить да

импорт ага в Регистрация.js.

импортировать * как Yup из "yup"

Вместо написания собственной пользовательской функции проверки используйте Yup, чтобы проверить правильность адреса электронной почты и пароля.

const formik = useFormik({
 начальные значения: {
 Эл. адрес: "",
 пароль: "",
 },
 validationSchema: Yup.object().shape({
 электронная почта: Yup.string()
 .email("Неверный адрес электронной почты")
 .требуется("Требуется"),
 пароль: Yup.string()
 .min (8, «Должно быть 8 или более символов»)
 .требуется("Требуется")
 }),
 onSubmit: (значения) => {
 console.log("Отправлено!");
// обработка отправки
 },
});

И это все! Вы создали простую регистрационную форму с помощью Formik и Yup.

Подведение итогов

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

10 лучших практик React, которым нужно следовать в 2022 году

Читать дальше

Об авторе