Управляйте состоянием формы React с Formik

Содержание

• Что такое Формик?
• 01. Начать
• 02. Создать форму Formik
• 03. Создать компонент "Голосование"
• 04. Добавьте поля
• 05. Логика питания
• 06. Состояние дисплея
• 07. Добавьте поле имени
• 08. Ошибки отображения
• 09. Добавить поле ответа

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

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

Чтобы получить дополнительные ресурсы, которые помогут улучшить ваш веб-дизайн, ознакомьтесь с нашим кратким описанием инструментов веб-дизайна и вариантов облачного хранилища. Начиная с нуля? Выберите подходящего конструктора веб-сайтов и получите правильный веб-хостинг с нашими обзорами.

• Загрузите исходные файлы

Что такое Формик?

Formik - это легкая библиотека, которая решает эти проблемы. Обернув форму предоставленными компонентами, мы получаем большую часть этого поведения бесплатно. Все, что нам нужно предоставить, это код для обработки того, что делает нашу форму уникальной.

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

01. Начать

Для начала откройте каталог «учебник» из файлов учебного пособия в командной строке. Установите зависимости и запустите сервер. Это приложение построено на основе create-react-app и включает его пакеты, а также сам Formik и несколько других, помогающих со стилем.

> установка npm> запуск npm

Сервер разработки запустится, и приложение откроется в браузере. Файл App.js управляет всем приложением, которое будет отображать наш компонент контейнера для формы. Открыть src / App.js и импортировать Голосовать> компонент.

импортировать VoteContainer из «./VoteContainer»;

Затем добавьте его в приложение.

section className = ”vote-container”> VoteContainer /> / section>

02. Создать форму Formik

Формы Formik можно создавать двумя способами. В с Формиком компонент более высокого порядка позволяет нам обернуть существующий компонент или использовать Формик> компонент с опорой рендеринга, которая выполняет ту же функцию, которую мы будем использовать.

Внутри VoteContainer.js создайте функциональный компонент, который будет содержать всю логику формы. Это возвращает Формик> компонент, который отображает нашу форму. Задайте начальное значение для полей, которые мы добавим позже через initialValues опора

импортировать {Формик} из "Формика"; импортировать голос из «./Vote»; function VoteContainer () {return Formik initialValues ​​= {{name: «», answer: «»}} render = {props => Vote {... props} />} />

03. Создать компонент "Голосование"

В Голосовать> Компонент содержит структуру формы. Разделяя логику Formik, мы можем максимально упростить компонент формы.

Создайте компонент Vote внутри Vote.js, который использует Форма> компонент от Formik. Добавьте кнопку, чтобы отправить форму как обычно.

импортировать {Form} из «формика»; function Vote () {return (Form className = "vote"> input type = "submit" value = "Голосовать сейчас" /> / Form>); }

04. Добавьте поля

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

На уровне формы есть два конкретных события - submit и reset. Когда форма отправляется, нам нужно, чтобы Formik взял на себя и выполнил ее проверки, а событие сброса очищает состояние. Импортированный Форма> Компонент связывает эти события с Formik.

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

В Поле> компонент выполняет ту же работу, что и Форма> делает для всей формы. Он связывает необходимые события и свойства, такие как имя и значение, для отображения состояния поля.

Добавьте поле в форму и свяжите его с меткой. Они работают так же, как и в обычных HTML-формах.

импортировать {Поле} из «формика»; label htmlFor = "name"> Имя / метка> Поле autoComplete = "name" id = "name" name = "name" type = "text" />

05. Логика питания

Нам не нужно работать с какими-либо событиями браузера для отправки, поскольку onSubmit событие обрабатывается для нас. Но нам нужно предоставить логику для обработки отправки. Обратный вызов по-прежнему вызывается onSubmit но вместо этого он получает значения формы напрямую. Он также получает 'мешок' - объект, содержащий несколько методов для взаимодействия с формой во время ее отправки.

Поскольку эти данные обычно отправляются на сервер, эта функция также может быть асинхронной. Формик имеет особую isSubmitting prop, которое автоматически устанавливает значение true после начала отправки. С помощью асинхронной функции мы можем дождаться отправки формы и установить для нее значение false.

Вернувшись в VoteContainer.js, мы можем добавить нашу логику отправки. Создайте функцию и передайте ее в Формик> составная часть. В этом примере мы не будем отправлять на сервер, но мы можем использовать отложенное обещание для имитации сетевой задержки.

const onSubmit = async (values, bag) => {ожидание нового обещания (resolve => setTimeout (resolve, 1000)); bag.setSubmitting (ложь); console.log («Форма отправлена», значения); }; return Formik [...] onSubmit = {onSubmit} />;

06. Состояние дисплея

Нам также необходимо отобразить это состояние отправки в форме. Чтобы предотвратить двойную отправку, мы можем отключить кнопку во время отправки формы. Formik передает это в форму внутри Vote.js как опору. Мы можем вытащить это и применить к кнопке.

function Vote ({isSubmitting}) {[…]} ввод отключен = {isSubmitting} type = "submit" value = "Проголосовать сейчас" />

07. Добавьте поле имени

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

Корень Формик> Компонент также принимает свойство validate, которое представляет собой функцию, которая выполняет проверку и возвращает объект. Каждая пара "ключ-значение" представляет собой поле и сообщение об ошибке. Если поле не имеет значения в этом объекте, оно считается действительным. Форма будет отправлена ​​только тогда, когда эта функция вернет пустой объект. Функция получает значения формы в качестве аргумента. Для обязательного поля нам нужно только проверить, не является ли значение пустой строкой.

Вернувшись в VoteContainer.js, создайте функцию обратного вызова validate, чтобы проверить это значение и подключить его к Formik.

const validate = values ​​=> {const errors = {}; if (values.name === «») {errors.name = «Требуется имя»; } возвращать ошибки; }; return Formik [...] validate = {валидировать} />;

08. Ошибки отображения

Затем эти ошибки передаются в Vote.js как опора ошибок. Чтобы отображать ошибки в строке, нам нужно сопоставить ошибки с конкретным полем формы.

function Vote ({isSubmitting, errors, touched}) {[…]} div className = "input-group"> label htmlFor = "name"> Имя / ярлык> div className = {classNames ({"validation-group": true , ошибка: !! errors.name && touched.name})}> Поле autoComplete = "name" id = "name" name = "name" type = "text" /> {!! errors.name && touched.name && (div className = ”error-message”> {errors.name} / div>)} / div> / div>

Formik будет проверять форму каждый раз, когда она обновляется. Форма с большим количеством полей сразу после первого изменения будет завалена ошибками. Чтобы избежать этого, мы отображаем ошибку только тогда, когда к полю «прикоснулись», то есть с ним в какой-то момент взаимодействовали. Когда форма отправляется, Formik коснется всех полей и покажет все скрытые ошибки.

09. Добавить поле ответа

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

Хотя мы можем включить несколько Поле> компоненты с одинаковыми именами, мы должны избегать повторения как можно чаще. Вместо этого Formik позволяет нам передать настраиваемый компонент в Field>, который может управлять ими как единым целым.

В AnswerGroup> Компонент работает аналогично вводу текста. Он принимает опцию options, которая представляет собой массив, содержащий параметры для отображения. Они преобразуются в стилизованные переключатели, которые позволяют пользователям выбирать ответ. Включите этот компонент в Vote.js. Используя Поле> ему передаются те же реквизиты, что и ввод имени, а также любые дополнения, в этом случае ПАРАМЕТРЫ постоянный.

импортировать AnswerGroup из «./AnswerGroup»; Компонент поля = {AnswerGroup} options = {OPTIONS} name = ”answer” />

Наконец, нам также нужно запросить ответ в нашей функции проверки в VoteContainer.js. Процесс там такой же, как и с полем имени.

if (values.answer === «») {errors.answer = «Требуется ответ»;

Разделяя логику проверки и отправки и используя Formik для объединения всего, мы можем сделать каждую часть небольшой и простой для понимания.

Этот контент изначально появился в сетевой журнал. Узнайте больше о наших статьи о веб-дизайне здесь.