როგორ მუშაობთ ფორმებთან ერთგვერდიან აპლიკაციებში (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).
• მომხმარებლის უკუკავშირი:
  • ჩატვირთვის ინდიკატორები.
  • ვალიდაციის შეცდომების შეტყობინებები.
  • გაგზავნის წარმატებისა/შეცდომის შეტყობინებები.
• Accessibility (A11y):
  • სემანტიკური HTML ელემენტების გამოყენება (<form>, <label>, <input>, <button>).
  • <label>-ის დაკავშირება შესაბამის ველებთან (атрибუტი for ან შიგნით მოთავსება).
  • საჭიროების შემთხვევაში WAI-ARIA ატრიბუტების გამოყენება.
• პროდუქტიულობა:
  • onChange მოვლენების დებაუნსინგი ან ტროტლინგი.
  • ფორმის მდგომარეობის ცვლილების ოპტიმიზაცია.
• ტესტირება:
  • ერთეულ-ტესტები ფორმის ლოგიკისა და ვალიდაციისთვის.
  • ინტეგრაციული ტესტები API-თან ურთიერთობისთვის.

კონტროლირებადი და არაკონტროლირებადი კომპონენტების არჩევანი დამოკიდებულია ფორმის სირთულეზე და მდგომარეობის მართვის და ვალიდაციის მოთხოვნებზე. უმეტეს შემთხვევაში, განსაკუთრებით რთულ ფორმებში, კონტროლირებადი კომპონენტები უზრუნველყოფენ მეტ მოქნილობას და კონტროლს.