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

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

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

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

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

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

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

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

> npm install
> npm start

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

import VoteContainer from “./VoteContainer”;

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

 

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

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

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

import { Formik } from “formik”;
import Vote from “./Vote”;

function VoteContainer() {
  return  } />

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

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

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

компонент от Formik. Добавьте кнопку, чтобы отправить форму как обычно.
import { Form } from “formik”;
function Vote() {
  return (

); }

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

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

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

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

компонент выполняет ту же работу, что и

делает для всей формы. Он связывает необходимые события и реквизиты, такие как имя и значение, для отображения состояния поля.Добавьте поле в форму и подключите его к метке. Они работают как в обычных HTML-формах.
import { Field } from “formik”;

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

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

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

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

const onSubmit = async (values, bag) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    bag.setSubmitting(false);
    console.log(“Form submitted”, values);
  };
return ;

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

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

function Vote({ isSubmitting }) {(…)}

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

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

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

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

const validate = values => {
    const errors = {};
    if (values.name === “”) {
      errors.name = “Name is required”;
    }
    return errors;
  };
return ;

08. Показать ошибки

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

function Vote({ isSubmitting, errors, touched }) {(…)}

{!!errors.name && touched.name && (

{errors.name}

)}

 

 

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

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

(Изображение: © Мэтт Крауч)

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

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

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

import AnswerGroup from “./AnswerGroup”;

(Изображение: © Мэтт Крауч)

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

if (values.answer === “”) {
  errors.answer = “Answer is required”;

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

Этот контент изначально появился в чистый журнал, Читайте больше нашего статьи о веб-дизайне здесь,

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

  • Как протестировать сайты и приложения React
  • 6 огромных трендов веб-дизайна на 2020 год
  • Мастер минимализма в веб-дизайне
Do NOT follow this link or you will be banned from the site!
WeCreativez WhatsApp Support
Наша служба поддержки клиентов готова ответить на ваши вопросы.
Привет, чем я могу помочь?