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

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

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

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

Содержание статьи

1 Что такое Formik?

Что такое Formik?

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

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

01. Начало работы

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

 > npm install> npm start

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

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

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

02. Создание формы Formik

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

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

  import {Formik} из «formik»; импортировать голосование из «./Vote»; function VoteContainer () {return  } />

03. Компонент Создать голосование

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

Создайте компонент голосования внутри Vote.js, который использует компонент

  import {Form} из «formik»; function Vote () {return (  ); }

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

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

На уровне формы существуют два конкретных события — отправка и сброс. Когда форма отправляется, нам нужно, чтобы Formik вступил во владение и выполнил ее проверки, а событие сброса очистило состояние. Импортированный компонент

  import {Field} из «formik»;  Имя

05. Логика снабжения

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

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

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

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

06. Состояние отображения

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

  функция Голосовать ({isSubmitting}) {[…]}

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

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

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

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

  const validate = values => {const errors = {}; if (values.name === «») {errors.name = «Имя обязательно»; } вернуть ошибки; }; возврат ;

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

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

  функция Голосовать ({isSubmitting, errors, touched}) {[…]}   Имя    {!! errors.name && touch. name && ( {errors.name} 
)}

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

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

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

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

Компонент работает аналогично вводу текста. Он принимает опцию опций, которая представляет собой массив, содержащий опции для отображения. Они превращаются в стилизованные переключатели, которые позволяют пользователям выбирать ответ. Включить этот компонент в Vote.js. При использовании он получает те же реквизиты, что и ввод имени, а также любые дополнительные элементы, в этом случае константа OPTIONS .

  импортировать группу ответов из «./AnswerGroup»;

(изображение: © Matt Crouch)

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

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

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

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

Подробнее: