Создание простой формы с использованием Formik — обработка ввода

Создание простой формы

Создадим форму обратной связи. Это довольно распространённый сценарий, и он отлично подходит для демонстрации возможностей Formik. Форма будет содержать два поля: имя и email.

Пример кода

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

// Типизация данных формы
interface FormValues {
    name: string;
    email: string;
}

const SimpleForm: React.FC = () => {
    // Начальное состояние формы
    const initialValues: FormValues = { name: "", email: "" };

    return (
        <Formik
            initialValues={initialValues}
            onSubmit={(values) => {
            console.log("Submitted values:", values);
            alert(`Спасибо за отправку! Имя: ${values.name}, Email: ${values.email}`);
            }}
        >
            {() => (
                <Form>
                    {/* Поле для имени */}
                    <label htmlFor="name">Имя:</label>
                    <Field id="name" name="name" placeholder="Введите своё имя" />

                    {/* Поле для email */}
                    <label htmlFor="email">Email:</label>
                    <Field id="email" name="email" placeholder="Введите ваш email" type="email" />

                    {/* Кнопка отправки */}
                    <button type="submit">Отправить</button>
                </Form>
            )}
        </Formik>
        );
};

export default SimpleForm;

Объяснение кода

1. Formik: это главный компонент, который оборачивает вашу форму. Он управляет всеми состояниями и обработчиками событий.
2. initialValues: начальные значения для всех полей формы. В данном примере name и email изначально пустые.
3. onSubmit: функция, которая вызывается при отправке формы. Здесь мы просто выводим данные в консоль и показываем пользователю алерт.
4. Field: это компонент Formik, который автоматически связывает поле ввода с состоянием формы. Вам не нужно писать обработчики onChange и value вручную!

Как работает этот код?

Formik делает много работы за вас:

1. Он автоматически отслеживает изменения в полях формы и обновляет соответствующее состояние.
2. Обработчик onSubmit вызывается только тогда, когда пользователь нажимает на кнопку отправки.
3. Все стили и атрибуты полей (например, id, name) передаются прямо в компонент Field, что делает код более лаконичным.

Обработка ввода

Formik позволяет легко обработать ввод данных. Если вы хотите, чтобы форма в реальном времени реагировала на изменения пользователя (например, показывала превью введённых данных), вы можете использовать немного другой подход.

Пример

Добавим к нашему примеру превью введённых данных:

{({ values }) => (
    <Form>
        <label htmlFor="name">Имя:</label>
        <Field id="name" name="name" placeholder="Введите своё имя" />

        <label htmlFor="email">Email:</label>
        <Field id="email" name="email" placeholder="Введите ваш email" type="email" />

        {/* Превью текущих данных */}
        <div>
            <p>Имя: {values.name}</p>
            <p>Email: {values.email}</p>
        </div>

        <button type="submit">Отправить</button>
    </Form>
)}

Что здесь нового?

• Используем values из Formik для доступа ко всему текущему состоянию формы.
• Это позволяет нам отображать динамическое превью введённых данных в реальном времени.

Типовые ошибки и как их избежать

Во время работы с Formik новички часто сталкиваются с несколькими типичными проблемами.

Первая — забывают передать name атрибут в Field. Это важно, так как именно name связывает поле с соответствующим полем в initialValues.

Также нередко забывают оборачивать форму в теги <Formik> и <Form>. Если вы не используете эти компоненты, Formik просто не будет работать.

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

Применение на практике

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

При собеседованиях знания Formik и умение с ним работать — это весомый плюс. Интервьюеры любят вопросы на тему "Как вы работаете с формами?", и теперь у вас есть чёткий ответ.

Следующим шагом мы добавим валидацию данных формы с использованием Yup. Настало время убедиться, что наши пользователи вводят корректные данные, а не просто "asdf" и "1234". Вы ведь знаете, как любят шутить пользователи!

1

Задача

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

Недоступна

Создание простой формы с использованием Formik

Создание простой формы с использованием Formik

Открыть

1

Задача

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

Недоступна

Реализация превью данных формы

Реализация превью данных формы

Открыть