При работе с формами в SPA использую управляемые (controlled) или неуправляемые (uncontrolled) компоненты.

Управляемые компоненты: Значение поля формы хранится в состоянии компонента и обновляется через setState.

// Пример управляемого компонента формы в React
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Отправлено:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Имя:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Отправить</button>
    </form>
  );
}

Плюсы управляемых:

Легче контролировать и валидировать ввод.
Проще реализовать логику условного отображения полей.
Удобно интегрировать с libraries для управления состоянием (Redux, Vuex).

Неуправляемые компоненты: Значение поля формы хранится непосредственно в DOM-элементе, доступ к которому осуществляется через ref.

// Пример неуправляемого компонента формы в React
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Отправлено:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Имя:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Отправить</button>
    </form>
  );
}

Плюсы неуправляемых:

Проще для простых форм без сложной логики.
Меньше кода для базовой реализации.

Общие подходы при работе с формами в SPA:

Валидация:
- На стороне клиента (JavaScript) для мгновенной обратной связи пользователю.
- На стороне сервера для обеспечения целостности данных.
- Использование библиотек для валидации (Yup, Zod, VeeValidate, Vuelidate).
Обработка отправки:
- Предотвращение дефолтного поведения (event.preventDefault()).
- Отправка данных на сервер (Fetch API, Axios, XHR).
- Отображение статуса отправки (загрузка, успех, ошибка).
Управление состоянием:
- Использование локального состояния компонента.
- Использование менеджеров состояний (Redux, Vuex, Pinia) для сложных форм или форм, данные которых используются в других частях приложения.
Обратная связь пользователю:
- Индикаторы загрузки.
- Сообщения об ошибках валидации.
- Сообщения об успехе/ошибке отправки.
Accessibility (A11y):
- Использование семантических HTML-элементов (<form>, <label>, <input>, <button>).
- Связывание <label> с соответствующими полями ввода (атрибут for или вложенность).
- Использование WAI-ARIA атрибутов при необходимости.
Performance:
- Дебаунсинг или троттлинг событий onChange для полей с частыми изменениями.
- Оптимизация рендеринга при изменении состояния формы.
Тестирование:
- Unit-тесты для логики формы и валидации.
- Интеграционные тесты для взаимодействия формы с API.

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

Как ты работаешь с формами в одностраничных приложениях (SPA)?