Многошаговые формы

Многошаговые формы позволяют разбивать длинные формы на логические блоки, улучшая пользовательский опыт. В MUI (Material-UI) для этого удобно использовать комбинацию компонентов Stepper, Step, StepLabel и стандартных элементов формы, таких как TextField, Select, Checkbox и Button. Рассмотрим детально построение такой формы.

Структура многошаговой формы

Основная структура многошаговой формы включает:

  1. Stepper – компонент для отображения прогресса.
  2. Шаги (Step) – каждый шаг содержит отдельный набор полей.
  3. Навигация – кнопки «Назад», «Далее», «Отправить» для перемещения между шагами.

Пример базовой структуры:

import React, { useState } from 'react';
import { Stepper, Step, StepLabel, Button, TextField } from '@mui/material';

const steps = ['Информация о пользователе', 'Контактные данные', 'Подтверждение'];

function MultiStepForm() {
  const [activeStep, setActiveStep] = useState(0);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: ''
  });

  const handleNext = () => setActiveStep(prev => prev + 1);
  const handleBack = () => setActiveStep(prev => prev - 1);
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const renderStepContent = (step) => {
    switch (step) {
      case 0:
        return <TextField label="Имя" name="name" value={formData.name} onCha nge={handleChange} fullWidth />;
      case 1:
        return (
          <>
            <TextField label="Email" name="email" value={formData.email} onCha nge={handleChange} fullWidth />
            <TextField label="Телефон" name="phone" value={formData.phone} onCha nge={handleChange} fullWidth />
          </>
        );
      case 2:
        return (
          <div>
            <p>Имя: {formData.name}</p>
            <p>Email: {formData.email}</p>
            <p>Телефон: {formData.phone}</p>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div>
      <Stepper activeStep={activeStep} alternativeLabel>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <div style={{ marginTop: 20 }}>
        {renderStepContent(activeStep)}
        <div style={{ marginTop: 20 }}>
          <Button disabled={activeStep === 0} onCl ick={handleBack}>Назад</Button>
          {activeStep === steps.length - 1 
            ? <Button variant="contained" color="primary">Отправить</Button> 
            : <Button variant="contained" color="primary" onCl ick={handleNext}>Далее</Button>
          }
        </div>
      </div>
    </div>
  );
}

export default MultiStepForm;

Управление состоянием формы

  • Для многошаговых форм важно хранить все данные в едином состоянии. В примере выше используется объект formData, который обновляется через handleChange.
  • Для сложных форм можно использовать useReducer или сторонние библиотеки управления формами (Formik, React Hook Form) для валидации и более удобного управления состоянием.

Валидация на каждом шаге

MUI не предоставляет встроенную валидацию, поэтому её реализуют самостоятельно:

const validateStep = (step) => {
  switch(step) {
    case 0:
      return formData.name.trim() !== '';
    case 1:
      return formData.email.includes('@') && formData.phone.trim() !== '';
    default:
      return true;
  }
};

const handleNext = () => {
  if (validateStep(activeStep)) {
    setActiveStep(prev => prev + 1);
  } else {
    alert('Пожалуйста, заполните обязательные поля.');
  }
};
  • Проверка каждого шага повышает качество данных и предотвращает переход к следующему шагу без заполнения необходимых полей.
  • Можно добавлять динамические сообщения об ошибках под каждым полем через свойство helperText в TextField.

Адаптивность и стилизация

  • MUI компоненты адаптивны по умолчанию, но для многошаговых форм полезно ограничить ширину формы и выровнять её по центру страницы.
  • Пример контейнера:
<div style={{ maxWidth: 600, margin: '0 auto', padding: 20 }}>
  {/* Stepper и форма */}
</div>
  • Использование темы MUI позволяет единообразно стилизовать все кнопки и поля:
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
});

<ThemeProvider theme={theme}>
  <MultiStepForm />
</ThemeProvider>

Расширенные возможности

  1. Динамическое добавление шагов – удобно, если форма зависит от предыдущих ответов пользователя.
  2. Прогресс-бар с процентами – можно использовать компонент LinearProgress и обновлять его значение по мере продвижения.
  3. Сохранение черновика – хранение состояния формы в localStorage или на сервере позволяет пользователю вернуться к заполнению позже.
  4. Анимации между шагами – MUI поддерживает анимации через компонент Fade или библиотеку react-transition-group.

Итоговая структура для больших форм

  • Stepper: визуальное представление прогресса.
  • Step: отдельные шаги с набором полей.
  • Состояние формы: объект, хранящий значения всех полей.
  • Навигация: кнопки «Назад» и «Далее» с валидацией.
  • Стилизация и адаптивность: контейнеры, тема MUI, responsive дизайн.
  • Дополнительные функции: сохранение, динамика шагов, анимации.

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

Оглавление