M

MLOG

Čeština

Komplexní průvodce hookem useFormStatus v Reactu, který umožňuje vývojářům vytvářet poutavé a informativní zážitky při odesílání formulářů pro globální uživatele.

React useFormStatus: Zvládnutí stavu odesílání formulářů

Formuláře jsou páteří nesčetných webových aplikací a slouží jako primární prostředek pro interakci uživatelů se servery a poskytování dat. Zajištění hladkého a informativního procesu odesílání formulářů je klíčové pro vytváření pozitivních uživatelských zážitků. React 18 představil mocný hook nazvaný useFormStatus, navržený ke zjednodušení správy stavu odesílání formulářů. Tento průvodce poskytuje komplexní přehled useFormStatus, zkoumá jeho funkce, případy použití a osvědčené postupy pro vytváření přístupných a poutavých formulářů pro globální publikum.

Co je React useFormStatus?

useFormStatus je React Hook, který poskytuje informace o stavu odeslání formuláře. Je navržen tak, aby bezproblémově fungoval se serverovými akcemi, což je funkce, která vám umožňuje spouštět logiku na straně serveru přímo z vašich React komponent. Hook vrací objekt obsahující informace o čekajícím stavu formuláře, datech a jakýchkoli chybách, které se vyskytly během odesílání. Tyto informace vám umožňují poskytovat uživatelům zpětnou vazbu v reálném čase, jako je zobrazování indikátorů načítání, deaktivace prvků formuláře a zobrazování chybových zpráv.

Porozumění serverovým akcím

Než se ponoříme do useFormStatus, je nezbytné porozumět serverovým akcím. Serverové akce jsou asynchronní funkce, které běží na serveru a mohou být vyvolány přímo z React komponent. Jsou definovány pomocí direktivy 'use server' na začátku souboru. Serverové akce se běžně používají pro úkoly jako:

Zde je jednoduchý příklad serverové akce:

// actions.js
'use server';

export async function submitForm(formData) {
  // Simulace zpoždění pro napodobení požadavku na server
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Please fill in all fields.' };
  }

  // Simulace úspěšného odeslání
  return { message: `Form submitted successfully for ${name}!` };
}

Tato akce přijímá data formuláře jako vstup, simuluje zpoždění a poté vrací úspěšnou nebo chybovou zprávu. Direktiva 'use server' říká Reactu, že tato funkce by měla být provedena na serveru.

Jak funguje useFormStatus

Hook useFormStatus se používá uvnitř komponenty, která vykresluje formulář. Musí být použit uvnitř elementu <form>, který používá vlastnost `action` s importovanou serverovou akcí. Hook vrací objekt s následujícími vlastnostmi:

Zde je příklad, jak použít useFormStatus v React komponentě:

'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">Name:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

V tomto příkladu:

Výhody použití useFormStatus

useFormStatus nabízí několik výhod pro správu stavu odesílání formulářů:

Nejlepší postupy pro používání useFormStatus

Pro maximalizaci výhod useFormStatus zvažte následující osvědčené postupy:

Případy použití pro useFormStatus

useFormStatus je použitelný v široké škále scénářů:

Řešení internacionalizace (i18n)

Při vytváření formulářů pro globální publikum je klíčová internacionalizace (i18n). Zde je návod, jak řešit i18n při použití useFormStatus:

Příklad s i18next:

// 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, // react již chrání před xss
    },
  });

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;

Aspekty přístupnosti

Zajištění přístupnosti je při tvorbě formulářů prvořadé. Zde je návod, jak učinit vaše formuláře přístupnějšími při použití useFormStatus:

Příklad s atributy ARIA:

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Indikuje, zda nastala chyba
        aria-describedby={error ? 'name-error' : null} // Přidruží chybovou zprávu
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Za hranicemi základního použití: Pokročilé techniky

Zatímco základní použití useFormStatus je přímočaré, několik pokročilých technik může dále vylepšit váš zážitek s odesíláním formulářů:

Řešení běžných problémů

Při používání useFormStatus se můžete setkat s některými běžnými problémy. Zde je návod, jak je řešit:

Alternativy k useFormStatus

Ačkoliv je useFormStatus mocný nástroj, existují alternativní přístupy pro správu stavu odesílání formulářů, zejména ve starších verzích Reactu nebo při řešení složité logiky formulářů:

Volba přístupu závisí na složitosti vašeho formuláře a vašich specifických požadavcích. Pro jednoduché formuláře je useFormStatus často nejjednodušším a nejefektivnějším řešením. Pro složitější formuláře může být vhodnější knihovna pro formuláře nebo řešení pro globální správu stavu.

Závěr

useFormStatus je cenným doplňkem ekosystému Reactu, který zjednodušuje správu stavu odesílání formulářů a umožňuje vývojářům vytvářet poutavější a informativnější uživatelské zážitky. Pochopením jeho funkcí, osvědčených postupů a případů použití můžete využít useFormStatus k vytváření přístupných, internacionalizovaných a výkonných formulářů pro globální publikum. Přijetí useFormStatus zefektivňuje vývoj, zlepšuje interakci s uživateli a v konečném důsledku přispívá k robustnějším a uživatelsky přívětivějším webovým aplikacím.

Při tvorbě formulářů pro globální publikum nezapomeňte upřednostnit přístupnost, internacionalizaci a výkon. Dodržováním osvědčených postupů uvedených v tomto průvodci můžete vytvářet formuláře, které jsou použitelné pro všechny, bez ohledu na jejich polohu nebo schopnosti. Tento přístup přispívá k inkluzivnějšímu a přístupnějšímu webu pro všechny uživatele.