Ինչպե՞ս եք աշխատում ձևերով մեկ էջանի հավելվածներում (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- ի հետ փոխազդեցության համար:

Ընտրությունը վերահսկվող և անվահական կոմպոնենտների միջև կախված է ձևի բարդությունից և վիճակի կառավարման և վավերացման պահանջներից: Բոլոր ձևերի մեծ մասում, հատկապես բարդ, վերահսկվող կոմպոնենտները առաջարկում են ավելի մեծ ճկունություն և վերահսկողություն։