Kako radite sa obrazcima u jednostranicama…

Када радим са формама у 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-јем.

Избор између контролисаних и неконтролисаних компоненти зависи од сложености форме и захтева за управљање стањем и валидацијом. За већину форма, посебно сложених, контролисане компоненте пружају већу флексибилност и контролу.

Kako radite sa obrazcima u jednostranicama aplikacijama (SPA)?