Установка и настройка Formik для работы с формами

Знакомство с Formik

Друзья, мы погружаемся в мир форм, где каждый неправильно обработанный onChange может вызвать волну негодования у пользователей. Но не бойтесь, у нас есть Formik — библиотека, которая упрощает работу с формами, делая её удобной и эффективной. Сегодня мы разберём, как установить и настроить Formik для нашего React-проекта.

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

• Легко управлять состоянием формы. Formik «оборачивает» состояние формы и предоставляет все данные через один объект.
• Упрощённая обработка событий. Formik берёт на себя всю грязную работу с onChange и onSubmit.
• Интеграция с TypeScript. Formik поддерживает строгую типизацию, что делает ваш код безопаснее.
• Совместимость с Yup. Formik прекрасно работает с Yup для валидации форм.

Теперь, когда мы мотивированы продолжать, давайте установим Formik!

Установка Formik

Для начала убедимся, что у нас уже запущен React-проект. Если нет, создайте его с помощью create-react-app или любого другого удобного для вас способа.

Установка Formik через npm:

npm install formik

Вот так просто! Formik теперь является частью нашего проекта.

Если вы используете TypeScript (а вы явно используете, раз читаете это), никаких дополнительных типов ставить не нужно — Formik уже содержит все типы!

Настройка формы с Formik

Formik предлагает два подхода для работы с формами: с помощью компонента <Formik> и с использованием useFormik хука. Сегодня мы будем использовать компонент <Formik>, так как это наиболее простой способ начать.

Структура формы

Formik предоставляет три основных компонента:

1. <Formik> — это родительский компонент, который управляет состоянием вашей формы.
2. <Form> — это заменитель стандартного HTML-тега <form>, который работает с Formik.
3. <Field> — компонент для создания полей ввода.

Рассмотрим простой пример, чтобы увидеть их в действии.

Создадим простую форму логина с двумя полями: email и password.

import React from "react";
import { Formik, Form, Field } from "formik";

const LoginForm: React.FC = () => {
  return (
    <Formik
            initialValues={{
            email: "", // начальное значение для email
        password: "", // начальное значение для password
      }}
      onSubmit={(values) => {
        // Обработка отправки формы
        console.log("Данные формы:", values);
      }}
    >
      {/* Дочерние компоненты Formik */}
      {() => (
        <Form>
          <div>
            <label htmlFor="email">Email:</label>
            <Field id="email" name="email" type="email" />
          </div>
          <div>
            <label htmlFor="password">Password:</label>
            <Field id="password" name="password" type="password" />
          </div>
          <button type="submit">Войти</button>
        </Form>
      )}
    </Formik>
    );
};

export default LoginForm;

Разбор кода

1. Компонент <Formik>:

   • Мы передаём объект initialValues, который содержит начальные значения для всех полей формы.
   • Передаём функцию onSubmit, которая вызывается при отправке формы. Она получает объект со всеми значениями формы.

2. Компонент <Form>:

   • Заменяет стандартный <form> и автоматически связывает его с <Formik>.

3. Компонент <Field>:

   • Это декларативный способ создания полей формы. Он автоматически связывается с состоянием, управляемым Formik (например, email в initialValues).

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

Настройка Formik с TypeScript

Formik поддерживает строгую типизацию. Давайте добавим немного TypeScript в наш пример.

Типизация начальных значений

Используем интерфейс для описания структуры данных формы:

interface LoginFormValues {
  email: string;
  password: string;
}

// Теперь передаём тип `LoginFormValues` в компонент Formik
const LoginForm: React.FC = () => {
  const initialValues: LoginFormValues = {
    email: "",
    password: "",
  };

  return (
    <Formik
            initialValues={initialValues}
            onSubmit={(values) => {
        console.log("Данные формы:", values);
      }}
    >
      {() => (
        <Form>
          <div>
            <label htmlFor="email">Email:</label>
            <Field id="email" name="email" type="email" />
          </div>
          <div>
            <label htmlFor="password">Password:</label>
            <Field id="password" name="password" type="password" />
          </div>
          <button type="submit">Войти</button>
        </Form>
      )}
    </Formik>
    );
};

Теперь, если кто-то забудет добавить поле в initialValues, TypeScript тут же поднимет красный флаг. Как говорится, безопасность прежде всего!

Как работает onSubmit

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

onSubmit={(values) => {
  alert(`Данные формы: ${JSON.stringify(values, null, 2)}`);
}}

Что дальше?

Formik сам по себе уже замечателен, но его возможности раскрываются ещё сильнее, когда вы добавляете к нему библиотеку для валидации — Yup. Скоро мы изучим, как использовать Yup для проверки правильности данных.

1

Задача

Модуль 3: React, 5 уровень, 1 лекция

Недоступна

Установка Formik

Установка Formik

Открыть

1

Задача

Модуль 3: React, 5 уровень, 1 лекция

Недоступна

Простая форма входа

Простая форма входа

Открыть