M

MLOG

Deutsch

Ein umfassender Leitfaden zum useFormStatus-Hook von React, der Entwickler befähigt, ansprechende und informative Formular-Einreichungserlebnisse für globale Benutzer zu schaffen.

React useFormStatus: Den Status der Formularübermittlung meistern

Formulare sind das Rückgrat unzähliger Webanwendungen und dienen als primäres Mittel für Benutzer, um mit Servern zu interagieren und Daten bereitzustellen. Ein reibungsloser und informativer Prozess bei der Formularübermittlung ist entscheidend für eine positive Benutzererfahrung. React 18 hat einen leistungsstarken Hook namens useFormStatus eingeführt, der entwickelt wurde, um die Verwaltung des Zustands bei der Formularübermittlung zu vereinfachen. Dieser Leitfaden bietet einen umfassenden Überblick über useFormStatus und untersucht seine Funktionen, Anwendungsfälle und Best Practices für die Erstellung barrierefreier und ansprechender Formulare für ein globales Publikum.

Was ist React useFormStatus?

useFormStatus ist ein React-Hook, der Informationen über den Übermittlungsstatus eines Formulars liefert. Er ist für die nahtlose Zusammenarbeit mit Server Actions konzipiert, einer Funktion, mit der Sie serverseitige Logik direkt aus Ihren React-Komponenten ausführen können. Der Hook gibt ein Objekt zurück, das Informationen über den ausstehenden Zustand des Formulars, die Daten und eventuell bei der Übermittlung aufgetretene Fehler enthält. Diese Informationen ermöglichen es Ihnen, Benutzern Echtzeit-Feedback zu geben, wie z. B. das Anzeigen von Ladeindikatoren, das Deaktivieren von Formularelementen und das Anzeigen von Fehlermeldungen.

Server Actions verstehen

Bevor wir uns mit useFormStatus befassen, ist es wichtig, Server Actions zu verstehen. Server Actions sind asynchrone Funktionen, die auf dem Server ausgeführt und direkt von React-Komponenten aufgerufen werden können. Sie werden mit der Direktive 'use server' am Anfang der Datei definiert. Server Actions werden häufig für Aufgaben wie die folgenden verwendet:

Hier ist ein einfaches Beispiel für eine Server Action:

// actions.js
'use server';

export async function submitForm(formData) {
  // Simuliert eine Verzögerung, um eine Serveranfrage nachzuahmen
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Bitte füllen Sie alle Felder aus.' };
  }

  // Simuliert eine erfolgreiche Übermittlung
  return { message: `Formular für ${name} erfolgreich übermittelt!` };
}

Diese Aktion nimmt Formulardaten als Eingabe, simuliert eine Verzögerung und gibt dann eine Erfolgs- oder Fehlermeldung zurück. Die Direktive 'use server' teilt React mit, dass diese Funktion auf dem Server ausgeführt werden soll.

Wie useFormStatus funktioniert

Der useFormStatus-Hook wird innerhalb einer Komponente verwendet, die ein Formular rendert. Er muss innerhalb eines <form>-Elements verwendet werden, das die `action`-Prop mit der importierten Server Action nutzt. Der Hook gibt ein Objekt mit den folgenden Eigenschaften zurück:

Hier ist ein Beispiel, wie man useFormStatus in einer React-Komponente verwendet:

'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 ? 'Wird übermittelt...' : 'Absenden'}
      </button>
      {error && <p style={{ color: 'red' }}>Fehler: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

In diesem Beispiel:

Vorteile der Verwendung von useFormStatus

useFormStatus bietet mehrere Vorteile für die Verwaltung des Formularübermittlungszustands:

Best Practices für die Verwendung von useFormStatus

Um die Vorteile von useFormStatus zu maximieren, sollten Sie die folgenden Best Practices berücksichtigen:

Anwendungsfälle für useFormStatus

useFormStatus ist in einer Vielzahl von Szenarien anwendbar:

Internationalisierung (i18n) berücksichtigen

Beim Erstellen von Formularen für ein globales Publikum ist die Internationalisierung (i18n) entscheidend. So berücksichtigen Sie i18n bei der Verwendung von useFormStatus:

Beispiel mit 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 schützt bereits vor 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;

Überlegungen zur Barrierefreiheit

Die Gewährleistung der Barrierefreiheit ist beim Erstellen von Formularen von größter Bedeutung. So machen Sie Ihre Formulare bei der Verwendung von useFormStatus zugänglicher:

Beispiel mit ARIA-Attributen:

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} // Anzeigen, ob ein Fehler vorliegt
        aria-describedby={error ? 'name-error' : null} // Fehlermeldung zuordnen
      />
      {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 ? 'Wird übermittelt...' : 'Absenden'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Über die Grundlagen hinaus: Fortgeschrittene Techniken

Während die grundlegende Verwendung von useFormStatus unkompliziert ist, können mehrere fortgeschrittene Techniken Ihre Formularübermittlungserfahrung weiter verbessern:

Fehlerbehebung bei häufigen Problemen

Bei der Verwendung von useFormStatus können einige häufige Probleme auftreten. Hier erfahren Sie, wie Sie diese beheben können:

Alternativen zu useFormStatus

Obwohl useFormStatus ein leistungsstarkes Werkzeug ist, gibt es alternative Ansätze zur Verwaltung des Formularübermittlungszustands, insbesondere in älteren React-Versionen oder bei komplexer Formularlogik:

Die Wahl des Ansatzes hängt von der Komplexität Ihres Formulars und Ihren spezifischen Anforderungen ab. Für einfache Formulare ist useFormStatus oft die unkomplizierteste und effizienteste Lösung. Für komplexere Formulare kann eine Formularbibliothek oder eine globale State-Management-Lösung besser geeignet sein.

Fazit

useFormStatus ist eine wertvolle Ergänzung des React-Ökosystems, die die Verwaltung des Formularübermittlungszustands vereinfacht und Entwicklern ermöglicht, ansprechendere und informativere Benutzererfahrungen zu schaffen. Indem Sie seine Funktionen, Best Practices und Anwendungsfälle verstehen, können Sie useFormStatus nutzen, um barrierefreie, internationalisierte und performante Formulare für ein globales Publikum zu erstellen. Die Verwendung von useFormStatus optimiert die Entwicklung, verbessert die Benutzerinteraktion und trägt letztendlich zu robusteren und benutzerfreundlicheren Webanwendungen bei.

Denken Sie daran, Barrierefreiheit, Internationalisierung und Leistung beim Erstellen von Formularen für ein globales Publikum zu priorisieren. Indem Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie Formulare erstellen, die für jeden nutzbar sind, unabhängig von seinem Standort oder seinen Fähigkeiten. Dieser Ansatz trägt zu einem inklusiveren und zugänglicheren Web für alle Benutzer bei.