Упростите обработку форм в приложениях React с Formik

Formik - это библиотека, которая упрощает обработку форм в приложениях React.

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

Установка

Мы можем установить Formik, запустив:

npm install formik --save

or

yarn add formik

Основное использование

Мы можем использовать это, написав:

import React from "react";
import { Formik } from "formik";
export default function App() {
  return (
    <div className="App">
      <Formik
        initialValues={{ email: "", password: "" }}
        validate={(values) => {
          const errors = {};
          if (!values.email) {
            errors.email = "Required";
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = "Invalid email address";
          }
          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting
        }) => (
          <form onSubmit={handleSubmit}>
            <input
              type="email"
              name="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            {errors.email && touched.email && errors.email}
            <input
              type="password"
              name="password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
            {errors.password && touched.password && errors.password}
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>
    </div>
  );
}

initialValues имеет начальные значения.

validate - это функция, которая позволяет нам проверять введенные значения формы.

values имеет значения, которые мы ввели.

Устанавливаем объект errors с ошибками для полей.

onSubmit имеет функцию, которая имеет введенные значения в объекте values.

setSubmitting - это функция, которую мы можем запустить, чтобы установить состояние отправки формы.

В элементе form мы устанавливаем форму onSubmit на функцию handleSubmit из параметра свойства рендеринга для запуска onSubmit, если это значение.

values.email и values.password имеют значение формы для каждого поля.

handleChange позволяет нам включать введенные значения в объект values в различных местах.

onBlur имеет метод handleBlur для обработки событий размытия.

touched имеет состояние касания для каждого поля формы.

isSubmitting имеет состояние отправки формы.

Мы можем упростить код с помощью компонентов Form, Field и ErrorMessage.

Например, мы можем сократить приведенный выше код до:

import React from "react";
import { ErrorMessage, Field, Form, Formik } from "formik";
export default function App() {
  return (
    <div className="App">
      <Formik
        initialValues={{ email: "", password: "" }}
        validate={(values) => {
          const errors = {};
          if (!values.email) {
            errors.email = "Required";
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = "Invalid email address";
          }
          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        {({ isSubmitting }) => (
          <Form>
            <Field type="email" name="email" />
            <ErrorMessage name="email" component="div" />
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

Компоненты заменяют элементы ввода формы и текст ошибки.

Пока значения name совпадают между Field и ErrorMessage, мы будем видеть одни и те же значения.

Заключение

Мы можем легко обрабатывать формы в React с Formik.

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!

Больше контента на plainenglish.io