В прошлом уроке мы создали модальное окно. Настало время добавить форму и реализовать возможность добавление новой статьи в приложении. За урок мы познакомимся с добавлением форм на основе библиотеки Formik.
Ранее в курсе мы уже работали с формами и получали данные от пользователя. Тогда мы не использовали дополнительных библиотек, так как наша форма состояла лишь из одного поля. При использовании более сложных форм всегда есть смысл использовать стороннюю библиотеку «Formik».
Эта библиотека позволяет быстро получить данные из всех полей формы, обработать данные и сделать в дальнейшем с ними любые удобные манипуляции.
Установка библиотеки
Для установки библиотеки необходимо выполнить специальную команду в терминале:
npm i formik
После этого вы сможете её импортировать и использовать в проекте.
Работа с библиотекой
Для работы с формами вам сперва нужно создать объект на основе «Formik» и далее прописать внутри него все необходимые поля. Пример реализации подобного можно увидеть ниже:
<Formik initialValues={{ fields: '' }} onSubmit={(values) => {
// Здесь прописываете действия
console.log(values);
}}>
{(props) => (
{/* Здесь прописываем все необходимые поля */}
)}
</Formik>
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию. PS: подобные задания доступны при подписке от 1 месяца
Создание приложения на React JS / Использование API 7 уроков
Комментарии
Мы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта. Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.