Hogyan dolgozol az űrlapokkal egylapos…

SPA-ban űrlapokkal való munkavégzés során irányított (controlled) vagy irányítatlan (uncontrolled) komponenseket használok.

Irányított komponensek: Az űrlap mező értéke a komponens állapotában tárolódik, és a setState segítségével frissül.

// React-ben irányított űrlap komponens példája
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('Elküldve:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Név:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Elküld</button>
    </form>
  );
}

Az irányított komponensek előnyei:

Könnyebb ellenőrizni és validálni a bevitelét.
Egyszerűbb a feltételes mezőmegjelenítés logikájának megvalósítása.
Könnyű integrálni állapotkezelő könyvtárakkal (Redux, Vuex).

Irányítatlan komponensek: A mező értéke közvetlenül a DOM elemben tárolódik, és a ref segítségével érhető el.

// React-ben irányítatlan űrlap komponens példája
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Elküldve:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Név:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Elküld</button>
    </form>
  );
}

Az irányítatlan komponensek előnyei:

Egyszerűbbek egyszerű űrlapok esetén, ahol nincs szükség komplex logikára.
Kevesebb kód szükséges az alapvető megvalósításhoz.

Általános megközelítések SPA-ban a formok kezeléséhez:

Validálás:
- Oldalon (JavaScript) a felhasználói visszacsatolás gyorsítása érdekében.
- Szerver oldalon az adatok integritásának biztosítására.
- Validációs könyvtárak használata (Yup, Zod, VeeValidate, Vuelidate).
Küldés kezelése:
- Az alapértelmezett viselkedés megakadályozása (event.preventDefault()).
- Adatok küldése a szerverre (Fetch API, Axios, XHR).
- A küldés státuszának megjelenítése (betöltés, siker, hiba).
Állapotkezelés:
- A komponens helyi állapotának használata.
- Állapotkezelő rendszerek (Redux, Vuex, Pinia) használata komplexebb vagy más részeken is használt űrlapok esetén.
Felhasználói visszacsatolás:
- Betöltési indikátorok.
- Validációs hibák üzenetei.
- Siker vagy hiba üzenetek küldéskor.
Elérhetőség (A11y):
- Szemantikus HTML elemek használata (<form>, <label>, <input>, <button>).
- A <label> összekapcsolása a megfelelő bemeneti mezővel (for attribútum vagy beágyazás).
- WAI-ARIA attribútumok használata szükség szerint.
Teljesítmény:
- onChange események debounce vagy throttle alkalmazása gyakori változások esetén.
- A renderelés optimalizálása a form állapotának változásakor.
Tesztelés:
- Egység tesztek a formák logikájához és validációjához.
- Integrációs tesztek az API-val való interakciókhoz.

A választás az irányított és irányítatlan komponensek között a form komplexitásától és a státusz, validálás kezelésének igényeitől függ. A legtöbb, különösen összetett, formában az irányított komponensek nagyobb rugalmasságot és kontrollt kínálnak.

Hogyan dolgozol az űrlapokkal egylapos alkalmazásokban (SPA)?