Implementierung von Reacts experimental_useFormStatus: Verbessertes Formularstatus-Management

Die sich ständig weiterentwickelnde Landschaft von React führt kontinuierlich Werkzeuge und Techniken ein, um die Entwicklererfahrung und die Anwendungsleistung zu verbessern. Ein solches experimentelles Feature ist der experimental_useFormStatus-Hook, der das Management des Formularstatus vereinfachen soll, insbesondere bei Server-Aktionen und in Szenarien der progressiven Verbesserung. Dieser umfassende Leitfaden wird den experimental_useFormStatus-Hook im Detail untersuchen und praktische Beispiele und Einblicke für seine effektive Nutzung bieten.

Was ist experimental_useFormStatus?

Der experimental_useFormStatus-Hook ist eine experimentelle API, die vom React-Team eingeführt wurde, um eine einfachere Möglichkeit zu bieten, den Status einer Formularabsendung zu verfolgen, insbesondere bei der Verwendung von Server-Aktionen. Vor diesem Hook erforderte die Verwaltung der verschiedenen Zustände eines Formulars (inaktiv, sendend, erfolgreich, Fehler) oft eine komplexe Zustandsmanagement-Logik. experimental_useFormStatus zielt darauf ab, einen Großteil dieser Komplexität zu abstrahieren und eine einfache und effiziente Möglichkeit zur Überwachung und Reaktion auf die Zustände der Formularabsendung zu bieten.

Wichtige Vorteile:

• Vereinfachtes Zustandsmanagement: Reduziert den Boilerplate-Code, der zur Verwaltung von Formularabsendungszuständen erforderlich ist.
• Verbesserte Benutzererfahrung: Ermöglicht reaktionsschnellere UI-Aktualisierungen basierend auf dem Status des Formulars.
• Verbesserte Code-Lesbarkeit: Macht formularbezogenen Code leichter verständlich und wartbar.
• Nahtlose Integration mit Server-Aktionen: Ist speziell für die Zusammenarbeit mit React Server Components und Server-Aktionen konzipiert.

Grundlegende Implementierung

Um die grundlegende Implementierung von experimental_useFormStatus zu veranschaulichen, betrachten wir ein einfaches Kontaktformular-Beispiel. Dieses Formular sammelt den Namen, die E-Mail-Adresse und die Nachricht eines Benutzers und sendet sie dann mithilfe einer Server-Aktion ab.

Voraussetzungen

Bevor Sie in den Code eintauchen, stellen Sie sicher, dass Sie ein React-Projekt mit den folgenden Anforderungen eingerichtet haben:

• Eine React-Version, die die experimentellen APIs unterstützt (überprüfen Sie die React-Dokumentation für die erforderliche Version).
• React Server Components aktiviert (typischerweise in Frameworks wie Next.js oder Remix verwendet).

Beispiel: Ein einfaches Kontaktformular

Hier ist eine einfache Kontaktformular-Komponente:

```jsx // app/actions.js (Server-Aktion) 'use server' export async function submitContactForm(formData) { // Simuliert einen Datenbankaufruf oder eine API-Anfrage await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Alle Felder sind erforderlich.' }; } try { // Durch tatsächlichen API-Aufruf oder Datenbankoperation ersetzen console.log('Formular gesendet:', { name, email, message }); return { success: true, message: 'Formular erfolgreich abgesendet!' }; } catch (error) { console.error('Fehler beim Senden des Formulars:', error); return { success: false, message: 'Fehler beim Absenden des Formulars.' }; } } // app/components/ContactForm.jsx (Client-Komponente) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( {pending ? 'Wird gesendet...' : 'Senden'} ) } export default function ContactForm() { return (

Name:

Email:

Nachricht: </div> <SubmitButton /> </form> ); } ``` <h3>Erläuterung</h3> <ul> <li><b>Server-Aktion (<code>app/actions.js</code>):</b> Diese Datei definiert die Funktion <code>submitContactForm</code>, bei der es sich um eine Server-Aktion handelt. Sie simuliert eine API-Anfrage mit einer Verzögerung von 2 Sekunden, um die asynchrone Natur der Formularabsendung zu demonstrieren. Sie kümmert sich auch um grundlegende Validierung und Fehlerbehandlung.</li> <li><b>Client-Komponente (<code>app/components/ContactForm.jsx</code>):</b> Diese Datei definiert die <code>ContactForm</code>-Komponente, die eine Client-Komponente ist. Sie importiert den <code>experimental_useFormStatus</code>-Hook und die <code>submitContactForm</code>-Aktion.</li> <li><b><code>useFormStatus</code>-Verwendung:</b> Innerhalb der <code>SubmitButton</code>-Komponente wird <code>useFormStatus</code> aufgerufen. Dieser Hook liefert Informationen über den Absendestatus des Formulars.</li> <li><b><code>pending</code>-Eigenschaft:</b> Die von <code>useFormStatus</code> zurückgegebene <code>pending</code>-Eigenschaft gibt an, ob das Formular gerade gesendet wird. Es wird verwendet, um den Senden-Button zu deaktivieren und eine "Wird gesendet..."-Nachricht anzuzeigen.</li> <li><b>Formular-Bindung:</b> Die <code>action</code>-Prop des <code>form</code>-Elements ist an die <code>submitContactForm</code>-Server-Aktion gebunden. Dies weist React an, die Server-Aktion aufzurufen, wenn das Formular abgesendet wird.</li> </ul> <h2>Erweiterte Nutzung und Überlegungen</h2> <h3>Umgang mit Erfolgs- und Fehlerzuständen</h3> <p>Obwohl <code>experimental_useFormStatus</code> die Verfolgung des Absendestatus vereinfacht, müssen Sie oft Erfolgs- und Fehlerzustände explizit behandeln. Server-Aktionen können Daten zurückgeben, die Erfolg oder Misserfolg anzeigen, welche Sie dann verwenden können, um die Benutzeroberfläche entsprechend zu aktualisieren.</p> <p><b>Beispiel:</b></p> ```jsx // app/components/ContactForm.jsx (Geändert) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( <button type="submit" disabled={pending}> {pending ? 'Wird gesendet...' : 'Senden'} </button> ) } export default function ContactForm() { const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return ( <div> <form action={handleSubmit}> <div> <label htmlFor="name">Name:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">Email:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Nachricht:</label> <textarea id="message" name="message" required /> </div> <SubmitButton /> </form> {message && ( <p className={message.success ? 'success' : 'error'}> {message.message} </p> )} </div> ); } ``` <p><b>Erläuterung:</b></p> <ul> <li><b>Zustand für Nachrichten:</b> Eine <code>message</code>-Zustandsvariable wird eingeführt, um das von der Server-Aktion zurückgegebene Ergebnis zu speichern.</li> <li><b>Handhabung des Ergebnisses:</b> Nachdem das Formular abgesendet wurde, aktualisiert die <code>handleSubmit</code>-Funktion den <code>message</code>-Zustand mit dem Ergebnis der Server-Aktion.</li> <li><b>Anzeigen von Nachrichten:</b> Die Komponente zeigt die Nachricht basierend auf der <code>success</code>-Eigenschaft des Ergebnisses an und wendet verschiedene CSS-Klassen für Erfolgs- und Fehlerzustände an.</li> </ul> <h3>Progressive Enhancement</h3> <p><code>experimental_useFormStatus</code> glänzt in Szenarien des Progressive Enhancement. By progressively enhancing a standard HTML form with React, you can provide a better user experience without sacrificing basic functionality if JavaScript fails.</p> <p><b>Beispiel:</b></p> <p>Beginnend mit einem einfachen HTML-Formular:</p> ```html <!-- public/contact.html --> <form action="/submit-contact" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name" required /> </div> <div> <label for="email">Email:</label> <input type="email" id="email" name="email" required /> </div> <div> <label for="message">Nachricht:</label> <textarea id="message" name="message" required>

Senden

```

Sie können es dann schrittweise mit React und experimental_useFormStatus verbessern.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( {pending ? 'Wird gesendet...' : 'Senden'} ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Verwenden Sie null als Anfangszustand, wenn Sie sich nicht darauf verlassen return (