Чӣ гуна бо формҳо дар барномаҳои як саҳифа (SPA) кор…

Ҳангоми кор бо формҳо дар 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) кор мекунед?