Бир беттин колдонмолорунда (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 атрибуттарын колдонуу.
Өндүрүмдүүлүк:
- onChange иш-чараларын debounce же throttle кылуу.
- Форманын абалы өзгөргөндө рендерди оптималдаштыруу.
Тестирлөө:
- Форманын логикасы жана валидациясы үчүн бирдик тесттер.
- API менен өз ара аракеттешүү үчүн интеграциялык тесттер.

Контролдоо жана көзөмөлсүз компоненттердин ортосунда тандоо форманын кыйынчылыгына жана абал менен валидация талаптарына көз каранды. Көпчүлүк формалар үчүн, өзгөчө кыйынчылары үчүн, контролдоо компоненттери көбүрөөк ийкемдүүлүк жана көзөмөл сунуштайт.

Бир беттин колдонмолорунда (SPA) формалар менен кантип иштешесиз?