Создание форм в React с Formik And Yup

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

Список содержимого

• Введение в Formik
• Введение в Yup
• Создание простой разметки формы
• Использование Formik с простой формой
• Добавление кнопки сброса
• Добавление проверки
• Обработка отправки
• Заключение

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

Вступление

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

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

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

Что Ага?

Ага, это валидационная библиотека. Его можно использовать для проверки object, array, string и почти любой структуры данных JavaScript. Мы будем использовать его для проверки нашего ввода.

Давайте перейдем к коду

Мы бы преобразовали нашу простую форму, которая ничего не делает, в интерактивную хорошо построенную форму с помощью formik.

Чтобы использовать Formik, нам просто нужно выполнить следующие шаги

• Оберните форму Formik компонентом из пакета formik.
• Замените ввод полями, так как он обеспечивает больший контроль над состоянием.
• Добавлен обработчик событий onChange и value, который также предоставляется Formikcomponent в качестве опоры.

Состояние формы обрабатывается Formik, поэтому было бы логично, что значения поля и события изменения должны обрабатываться Formik.

Использование Formik

Нам нужно передать определенные свойства в fromik, чтобы он работал.

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

Форма с Formik

Теперь посмотрим, как теперь выглядит наша форма.

Посмотрим на реквизит, переданный Формику. initalValues указывает начальное состояние формы. onSubmit указать функцию, вызываемую со значениями формы и действия, которое может быть выполнено в состоянии формы. Изменение также обрабатывается formik путем предоставления метода props.handleChange и обновленного значения путем предоставления props.values.

Field - это просто оболочка вокруг тегов ввода, которую можно использовать для рендеринга любого компонента ввода от select, checkbox до кнопки radio. Мы можем сделать что-то подобное. Вы можете проверить Formik Docs для получения дополнительной информации.

<Field component="select" name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</Field>

Различные методы визуализации форм

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

<Formik 
...props
component={Form}
/>
or
<Formik
...props
render={()=><Form />}
or
<Formik ...props >
 ()=><Form />
</Formik>

Добавление сброса в форму

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

<button
  disabled={!props.dirty}
  onClick={props.handleReset}
  type="button"
  className={s.button}
>
  Reset
</button>

У нас есть рабочая кнопка сброса.

Добавление проверки

Сначала мы будем использовать Yup для проверки наших входных данных, мы должны построить схему для проверки объекта.

import * as yup from 'yup'

Теперь мы можем использовать yup.object, yup.string и т. Д. Давайте создадим его для нашей формы.

const userSchema = yup.object().shape({
  name: yup.string().required("Name is Required."),
  email: yup
    .string()
    .email("Please Enter an valid Email")
    .required("Email is Required."),
  password: yup
    .string()
    .required("Password is Required.")
    .max(13,"Too long")
    .min(8,"Too short")
})

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

Мы показываем ошибку, если наше поле было затронуто и имеет ошибку, используя props, предоставленные formik.

Обработка отправки формы

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

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

Пройдем через поток

Мы используем кнопку отправки, чтобы отправить форму, и reset, чтобы сбросить ее. Мы используем setUser, чтобы изменить состояние компонента и использовать его в наших деталях. Мы используем Yup для проверки наших входных данных.

Заключение

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

Если вам интересно, как я настроил свой проект реакции, пожалуйста, проверьте мой предыдущий блог

Бонус

Весь код Анкеты за вас :).

Учить больше

Совет: Сборка из компонентов? вам, вероятно, следует сделать их многоразовыми, чтобы делиться ими между приложениями. Инструменты с открытым исходным кодом, такие как Bit, могут вам помочь, обратите внимание: