M

MLOG

Polski

Kompleksowy przewodnik po hooku useFormStatus w React, pozwalający tworzyć angażujące i płynne procesy przesyłania formularzy dla użytkowników na całym świecie.

React useFormStatus: Opanowanie stanu przesyłania formularza

Formularze są podstawą niezliczonych aplikacji internetowych, służąc jako główny środek interakcji użytkowników z serwerami i dostarczania im danych. Zapewnienie płynnego i informacyjnego procesu przesyłania formularza jest kluczowe dla tworzenia pozytywnych doświadczeń użytkownika. React 18 wprowadził potężny hook o nazwie useFormStatus, zaprojektowany w celu uproszczenia zarządzania stanem przesyłania formularza. Ten przewodnik stanowi kompleksowy przegląd useFormStatus, omawiając jego funkcje, przypadki użycia oraz najlepsze praktyki budowania dostępnych i angażujących formularzy dla globalnej publiczności.

Czym jest React useFormStatus?

useFormStatus to Hook Reacta, który dostarcza informacji o statusie przesyłania formularza. Został zaprojektowany do bezproblemowej współpracy z akcjami serwerowymi, funkcją, która pozwala na wykonywanie logiki po stronie serwera bezpośrednio z komponentów React. Hook zwraca obiekt zawierający informacje o stanie oczekiwania formularza, danych oraz wszelkich błędach, które wystąpiły podczas przesyłania. Informacje te pozwalają na dostarczanie użytkownikom informacji zwrotnej w czasie rzeczywistym, takiej jak wyświetlanie wskaźników ładowania, wyłączanie elementów formularza i wyświetlanie komunikatów o błędach.

Zrozumienie Akcji Serwerowych

Zanim zagłębimy się w useFormStatus, kluczowe jest zrozumienie akcji serwerowych. Akcje serwerowe to asynchroniczne funkcje, które działają na serwerze i mogą być wywoływane bezpośrednio z komponentów React. Są one definiowane za pomocą dyrektywy 'use server' na początku pliku. Akcje serwerowe są powszechnie używane do zadań takich jak:

Oto prosty przykład akcji serwerowej:

// actions.js
'use server';

export async function submitForm(formData) {
  // Symulacja opóźnienia w celu naśladowania żądania serwera
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Proszę wypełnić wszystkie pola.' };
  }

  // Symulacja pomyślnego przesłania
  return { message: `Formularz pomyślnie przesłany dla ${name}!` };
}

Ta akcja przyjmuje dane formularza jako dane wejściowe, symuluje opóźnienie, a następnie zwraca komunikat o powodzeniu lub błędzie. Dyrektywa 'use server' informuje React, że ta funkcja powinna być wykonana na serwerze.

Jak działa useFormStatus

Hook useFormStatus jest używany wewnątrz komponentu, który renderuje formularz. Musi być użyty wewnątrz elementu <form>, który używa propa `action` z zaimportowaną Akcją Serwerową. Hook zwraca obiekt z następującymi właściwościami:

Oto przykład, jak używać useFormStatus w komponencie React:

'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">Imię:</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 ? 'Przesyłanie...' : 'Prześlij'}
      </button>
      {error && <p style={{ color: 'red' }}>Błąd: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

W tym przykładzie:

Zalety używania useFormStatus

useFormStatus oferuje kilka korzyści w zarządzaniu stanem przesyłania formularza:

Najlepsze praktyki używania useFormStatus

Aby zmaksymalizować korzyści płynące z useFormStatus, rozważ następujące najlepsze praktyki:

Przypadki użycia useFormStatus

useFormStatus ma zastosowanie w szerokim zakresie scenariuszy:

Obsługa internacjonalizacji (i18n)

Podczas tworzenia formularzy dla globalnej publiczności, internacjonalizacja (i18n) jest kluczowa. Oto jak podejść do i18n podczas używania useFormStatus:

Przykład z 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 already safes from 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;

Kwestie dostępności

Zapewnienie dostępności jest najważniejsze podczas tworzenia formularzy. Oto jak uczynić swoje formularze bardziej dostępnymi przy użyciu useFormStatus:

Przykład z atrybutami ARIA:

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">Imię:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Wskazuje, czy wystąpił błąd
        aria-describedby={error ? 'name-error' : null} // Powiązuje komunikat o błędzie
      />
      {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 ? 'Przesyłanie...' : 'Prześlij'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Poza podstawowym użyciem: Zaawansowane techniki

Chociaż podstawowe użycie useFormStatus jest proste, istnieje kilka zaawansowanych technik, które mogą dodatkowo ulepszyć doświadczenie przesyłania formularza:

Rozwiązywanie typowych problemów

Podczas używania useFormStatus możesz napotkać pewne typowe problemy. Oto jak je rozwiązywać:

Alternatywy dla useFormStatus

Chociaż useFormStatus jest potężnym narzędziem, istnieją alternatywne podejścia do zarządzania stanem przesyłania formularza, zwłaszcza w starszych wersjach Reacta lub przy obsłudze złożonej logiki formularzy:

Wybór podejścia zależy od złożoności Twojego formularza i Twoich specyficznych wymagań. Dla prostych formularzy useFormStatus jest często najprostszym i najwydajniejszym rozwiązaniem. Dla bardziej złożonych formularzy bardziej odpowiednia może być biblioteka do formularzy lub globalne rozwiązanie do zarządzania stanem.

Podsumowanie

useFormStatus jest cennym dodatkiem do ekosystemu React, upraszczającym zarządzanie stanem przesyłania formularza i umożliwiającym deweloperom tworzenie bardziej angażujących i informacyjnych doświadczeń użytkownika. Rozumiejąc jego funkcje, najlepsze praktyki i przypadki użycia, możesz wykorzystać useFormStatus do budowania dostępnych, zinternacjonalizowanych i wydajnych formularzy dla globalnej publiczności. Zastosowanie useFormStatus usprawnia rozwój, poprawia interakcję z użytkownikiem i ostatecznie przyczynia się do tworzenia bardziej solidnych i przyjaznych dla użytkownika aplikacji internetowych.

Pamiętaj, aby priorytetowo traktować dostępność, internacjonalizację i wydajność podczas tworzenia formularzy dla globalnej publiczności. Postępując zgodnie z najlepszymi praktykami opisanymi w tym przewodniku, możesz tworzyć formularze, które są użyteczne dla wszystkich, niezależnie od ich lokalizacji czy umiejętności. Takie podejście przyczynia się do bardziej inkluzywnej i dostępnej sieci dla wszystkich użytkowników.