M

MLOG

Magyar

Átfogó útmutató a React useFormStatus hook-hoz, amely segít a fejlesztőknek vonzó és informatív űrlapküldési élményt teremteni globális felhasználók számára.

React useFormStatus: Az űrlapküldési állapot mesteri kezelése

Az űrlapok számtalan webalkalmazás gerincét képezik, ezek a legfőbb eszközei annak, hogy a felhasználók interakcióba lépjenek és adatokat szolgáltassanak a szervereknek. A zökkenőmentes és informatív űrlapküldési folyamat biztosítása kulcsfontosságú a pozitív felhasználói élmény megteremtésében. A React 18 bevezetett egy erőteljes hook-ot, a useFormStatus-t, amelyet az űrlapküldési állapot kezelésének egyszerűsítésére terveztek. Ez az útmutató átfogó áttekintést nyújt a useFormStatus-ról, feltárva annak funkcióit, használati eseteit és a legjobb gyakorlatokat a hozzáférhető és vonzó űrlapok készítéséhez globális közönség számára.

Mi az a React useFormStatus?

A useFormStatus egy React Hook, amely információt szolgáltat egy űrlap beküldési állapotáról. Úgy tervezték, hogy zökkenőmentesen működjön együtt a szerver oldali műveletekkel (server actions), egy olyan funkcióval, amely lehetővé teszi, hogy szerveroldali logikát hajtson végre közvetlenül a React komponensekből. A hook egy objektumot ad vissza, amely információkat tartalmaz az űrlap függőben lévő állapotáról, az adatokról és a beküldés során esetlegesen felmerült hibákról. Ez az információ lehetővé teszi, hogy valós idejű visszajelzést adjon a felhasználóknak, például betöltésjelzők megjelenítésével, űrlap elemek letiltásával és hibaüzenetek megjelenítésével.

A szerver oldali műveletek (Server Actions) megértése

Mielőtt belemerülnénk a useFormStatus használatába, elengedhetetlen megérteni a szerver oldali műveleteket. A szerver oldali műveletek aszinkron függvények, amelyek a szerveren futnak, és közvetlenül a React komponensekből hívhatók meg. A fájl tetején a 'use server' direktívával definiáljuk őket. A szerver oldali műveleteket általában olyan feladatokra használják, mint:

Íme egy egyszerű példa egy szerver oldali műveletre:

// actions.js
'use server';

export async function submitForm(formData) {
  // Késleltetés szimulálása a szerveroldali kérés utánzásához
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Kérjük, töltse ki az összes mezőt.' };
  }

  // Sikeres beküldés szimulálása
  return { message: `Az űrlap sikeresen elküldve ${name} részére!` };
}

Ez a művelet űrlapadatokat vesz be bemenetként, szimulál egy késleltetést, majd egy siker- vagy hibaüzenetet ad vissza. A 'use server' direktíva jelzi a React-nek, hogy ezt a függvényt a szerveren kell végrehajtani.

Hogyan működik a useFormStatus?

A useFormStatus hook-ot egy olyan komponensen belül használjuk, amely egy űrlapot renderel. Egy olyan <form> elemen belül kell használni, amely az importált szerver oldali művelettel használja az `action` prop-ot. A hook egy objektumot ad vissza a következő tulajdonságokkal:

Íme egy példa a useFormStatus használatára egy React komponensben:

'use client'
import { useFormStatus } from 'react-dom';
import { submitForm } from './actions';

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Név:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">E-mail:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Küldés...' : 'Küldés'}
      </button>
      {error && <p style={{ color: 'red' }}>Hiba: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

Ebben a példában:

A useFormStatus használatának előnyei

A useFormStatus számos előnyt kínál az űrlapküldési állapot kezelésében:

Bevált gyakorlatok a useFormStatus használatához

A useFormStatus előnyeinek maximalizálása érdekében vegye figyelembe a következő bevált gyakorlatokat:

A useFormStatus felhasználási esetei

A useFormStatus széles körű forgatókönyvekben alkalmazható:

A nemzetköziesítés (i18n) kezelése

Amikor globális közönségnek készít űrlapokat, a nemzetköziesítés (i18n) kulcsfontosságú. Íme, hogyan kezelje az i18n-t a useFormStatus használatakor:

Példa i18next-szel:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // a react már véd az XSS-től
    },
  });

export default i18n;

// MyForm.js

import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">{t('name')}:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">{t('email')}:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? t('submitting') : t('submit')}
      </button>
      {error && <p style={{ color: 'red' }}>{t('error')}: {t(error.message)}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{t(data.message)}</p>}
    </form>
  );
}

export default MyForm;

Akadálymentesítési szempontok

Az akadálymentesítés biztosítása kiemelten fontos az űrlapok készítésekor. Íme, hogyan teheti űrlapjait hozzáférhetőbbé a useFormStatus használata során:

Példa ARIA attribútumokkal:

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Név:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Hiba jelzése
        aria-describedby={error ? 'name-error' : null} // Hibaüzenet társítása
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">E-mail:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Küldés...' : 'Küldés'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Az alapvető használaton túl: Haladó technikák

Bár a useFormStatus alapvető használata egyszerű, számos haladó technika tovább javíthatja az űrlapküldési élményt:

Gyakori problémák hibaelhárítása

A useFormStatus használata során találkozhat néhány gyakori problémával. Íme, hogyan háríthatja el őket:

A useFormStatus alternatívái

Bár a useFormStatus egy erőteljes eszköz, léteznek alternatív megközelítések az űrlapküldési állapot kezelésére, különösen régebbi React verziókban vagy bonyolult űrlaplogika esetén:

A megközelítés megválasztása az űrlap bonyolultságától és a specifikus követelményektől függ. Egyszerű űrlapok esetén a useFormStatus gyakran a legegyszerűbb és leghatékonyabb megoldás. Bonyolultabb űrlapok esetén egy űrlapkezelő könyvtár vagy egy globális állapotkezelési megoldás lehet megfelelőbb.

Összegzés

A useFormStatus értékes kiegészítése a React ökoszisztémának, amely leegyszerűsíti az űrlapküldési állapot kezelését, és lehetővé teszi a fejlesztők számára, hogy vonzóbb és informatívabb felhasználói élményeket hozzanak létre. By understanding its features, best practices, and use cases, you can leverage useFormStatus to build accessible, internationalized, and performant forms for a global audience. Embracing useFormStatus streamlines development, enhances user interaction, and ultimately contributes to more robust and user-friendly web applications.

Ne felejtse el előtérbe helyezni az akadálymentesítést, a nemzetköziesítést és a teljesítményt, amikor globális közönségnek készít űrlapokat. Az útmutatóban vázolt bevált gyakorlatok követésével olyan űrlapokat hozhat létre, amelyek mindenki számára használhatóak, függetlenül a tartózkodási helyüktől vagy képességeiktől. Ez a megközelítés hozzájárul egy befogadóbb és hozzáférhetőbb webhez minden felhasználó számára.