/
Блог
/
Код
/

Как создавать формы с помощью библиотеки Formik в React

Как создавать формы с помощью библиотеки Formik в React

20 апреля 2023 г.
4 минуты
22

Рассказываем, как работает библиотека Formik для создания форм в React и почему мы рекомендуем ее использовать.

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

<!-- CoursesList is empty -->

Что такое Formik

Formik — это легкая, бесплатная библиотека с открытым исходным кодом для React или React Native, которая решает три основные задачи при создании форм:

  • Управление состоянием формы
  • Валидация формы
  • Отправка формы.

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

Почему стоит использовать Formik

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

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

Formik берет на себя все вышеперечисленные заботы и предоставляет ряд компонентов и хуков для создания форм в React и React Native. Далее в статье мы познакомимся с основными компонентами этой библиотеки: <Formik />, <Form />, <Field /> и <ErrorMessage />.

Как управлять состоянием формы в Formik

Для того, чтобы начать работать с Formik, достаточно обернуть форму в компонент <Formik />:

<Formik>
  <Form>
    {/* здесь остальной код */}
  </Form>
</Formik>

С помощью пропса initialValues мы инициализируем начальное состояние формы внутри Formik. При этом для того, чтобы получать значения и обновлять состояние полей формы, можно воспользоваться компонентом <Field /> вместо обычного HTML-элемента <input />. Этот компонент будет самостоятельно синхронизировать состояние, и нам не потребуется передавать через пропсы value и onChange:

<Formik
  initialValues={{ email: "", password: "" }}
  onSubmit={({ setSubmitting }) => {
    console.log("Form is validated! Submitting the form...");
    setSubmitting(false);
  }}
>
  {() => (
    <Form>
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <Field
          type="email"
          name="email"
          className="form-control"
        />
      </div>
      <div className="form-group">
        <label htmlFor="password">Password</label>
        <Field
          type="password"
          name="password"
          className="form-control"
        />
      </div>
    </Form>
  )}
</Formik>

У Formik есть собственный метод handleChange, который можно использовать для обновления состояния при пользовательском вводе данных в поля формы. Таким образом отпадает необходимость реализовывать собственный метод handleChange. В примере ниже метод handleChange обновляет значения поля email в состоянии формы на основании атрибута name, если в этом поле будут изменения:

const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      email: "",
    },
    onSubmit: (values) => {
      console.log(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

Метод handleChange используется с input-элементами, а компонент <Field> самостоятельно обновляет значения без необходимости реализации метода handleChange.

Читайте также:

Маршрутизация в React Router: как она работает и почему ее выбирают разработчики

Библиотека React: особенности, перспективы, ситуация на рынке труда

Библиотека React: особенности, перспективы, ситуация на рынке труда

Язык программирования PHP: почему его выбирают разработчики и с чего начать изучение

Язык программирования PHP: почему его выбирают разработчики и с чего начать изучение

С чего начать изучение JavaScript и как это делать эффективно

С чего начать изучение JavaScript и как это делать эффективно

Валидация и сообщения об ошибках в Formik

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

Валидация в Formik выполняется автоматически во время определенных событий, такие как ввод данных пользователем, изменение фокуса и отправка. При этом Formik поддерживает валидацию как на уровне формы, так и на уровне поля. Все, что нужно сделать, это передать функцию проверки в компонент <Formik /> или <Field /> через проп validate:

// Synchronous validation
 const validate = (values, props) => {
   const errors = {};
 
   if (!values.email) {
     errors.email = 'Required';
   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
     errors.email = 'Invalid email address';
   }
 
   //...
 
   return errors;
 };

Как показать сообщения об ошибках в Formik

Formik предоставляет компонент <ErrorMessage /> для автоматического отображения сообщений об ошибках для компонента <Field /> с соответствующим именем (name).

<ErrorMessage /> через свойство component позволяет указать, какой HTML-тег будет отображаться:

<Field
  type="email"
  name="email"
  className={`form-control ${
    touched.email && errors.email ? "is-invalid" : ""
  }`}
/>
<ErrorMessage
  component="div"
  name="email"
  className="invalid-feedback"
/>

Валидация с помощью Yup

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

Yup — это библиотека для валидации объектов JS. Она позволяет описать схему валидации объекта, где для каждого свойства объекта устанавливается ряд ограничений, и далее на этом объекте вызывается метод валидации validate.

Formik предоставляет поддержку схем валидации validationSchema в Yup — она автоматически преобразует ошибки валидации из Yup в объект, ключи которого соответствуют значениям полей формы.

Читайте также:

Как деплоить приложение на Railway. Гайд для фронтендеров и бэкендеров

Для того, чтобы добавить Yup в проект, нужно установить его из npm:

npm install yup --save
import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Минимум 2 буквы')
    .max(50, 'Максимум 50 букв')
    .required('Обязательное поле'),
  lastName: Yup.string()
    .min(2, 'Минимум 2 буквы')
    .max(50, 'Максимум 50 букв')
    .required('Обязательное поле'),
  email: Yup.string().email('Неверный email').required('Обязательное поле'),
});

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      validationSchema={SignupSchema}
      onSubmit={ (values) => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="firstName" />
          {errors.firstName && touched.firstName ? (
            <div>{errors.firstName}</div>
          ) : null}
          <Field name="lastName" />
          {errors.lastName && touched.lastName ? (
            <div>{errors.lastName}</div>
          ) : null}
          <Field name="email" type="email" />
          {errors.email && touched.email ? <div>{errors.email}</div> : null}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

Отправка формы в Formik

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

В примере ниже функция onSubmit вызывается при отправке формы и использует функцию setSubmitting для обновления состояния компонента Formik в процессе отправки.

<Formik
   initialValues={{ username: "", email: "", password: "" }}
   // . . .
   onSubmit={(values, { setSubmitting }) => {
     setTimeout(() => {
       console.log(JSON.stringify(values, null, 2));
       setSubmitting(false);
     }, 400);
   }}
>

Заключение

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

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

Станьте профессиональным фронтенд-разработчиком с нуля за 10 месяцев

На Хекслете есть профессия «Фронтенд-разработчик». Пройдите ее, чтобы изучить один из самых известных языков программирования, освоить популярные фреймворки и создать большое портфолио с проектами на GitHub.

Читайте также:

Категории