Как работите с формите в едностранични приложения…

Когато работя с формуляри в 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>
  );
}

Предимства на контролирани:

По-лесно е да се контролира и валидира въвеждането.
По-лесно е да се реализира условното показване на полета.
Лесна интеграция с библиотеки за управление на състоянието (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) за по-сложни формуляри или такива, които се използват в други части на приложението.
Обратна връзка към потребителя:
- Индикатори за зареждане.
- Съобщения за грешки при валидиране.
- Съобщения за успех/грешка при изпращане.
Достъпност (A11y):
- Използване на семантични HTML елементи (<form>, <label>, <input>, <button>).
- Свързване на <label> с съответните полета за въвеждане (for атрибут или вложеност).
- Използване на WAI-ARIA атрибути при необходимост.
Производителност:
- Debouncing или throttling на събитията onChange за полета с чести промени.
- Оптимизация на рендерирането при промяна на състоянието на формуляра.
Тестване:
- Юнит тестове за логиката на формуляра и валидирането.
- Интеграционни тестове за взаимодействие на формуляра с API.

Изборът между контролирани и неконтролирани компоненти зависи от сложността на формуляра и изискванията към управлението на състоянието и валидирането. За повечето формуляри, особено сложни, контролирани компоненти предлагат повече гъвкавост и контрол.

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