2. september 2025Dansk

Udforsk Reacts experimental_useFormStatus hook til strømlinet styring af formularstatus. Lær implementering, fordele og avanceret brug med praktiske eksempler.

Implementering af React experimental_useFormStatus: Forbedret Styring af Formularstatus

Reacts landskab er i konstant udvikling og introducerer løbende værktøjer og teknikker til at forbedre udvikleroplevelsen og applikationens ydeevne. En sådan eksperimentel funktion er experimental_useFormStatus hook'en, designet til at forenkle styringen af formularstatus, især i scenarier med serverhandlinger og progressiv forbedring. Denne omfattende guide vil udforske experimental_useFormStatus hook'en i detaljer og give praktiske eksempler og indsigter til dens effektive anvendelse.

Hvad er `experimental_useFormStatus`?

experimental_useFormStatus hook'en er en eksperimentel API introduceret af React-teamet for at give en mere ligetil måde at spore status for en formularafsendelse på, især ved brug af serverhandlinger. Før denne hook krævede styring af de forskellige tilstande af en formular (inaktiv, sender, succes, fejl) ofte kompleks logik til state-håndtering. experimental_useFormStatus sigter mod at abstrahere meget af denne kompleksitet væk og give en simpel og effektiv måde at overvåge og reagere på formularafsendelsestilstande.

Væsentlige fordele:

Forenklet State-håndtering: Reducerer den boilerplate-kode, der er nødvendig for at håndtere formularafsendelsestilstande.
Forbedret Brugeroplevelse: Muliggør mere responsive UI-opdateringer baseret på formularens status.
Forbedret Kodelæsbarhed: Gør formularrelateret kode lettere at forstå og vedligeholde.
Problemfri Integration med Serverhandlinger: Designet til at fungere særligt godt med React Server Components og serverhandlinger.

Grundlæggende Implementering

For at illustrere den grundlæggende implementering af experimental_useFormStatus, lad os overveje et simpelt eksempel på en kontaktformular. Denne formular vil indsamle en brugers navn, e-mail og besked og derefter sende den ved hjælp af en serverhandling.

Forudsætninger

Før du dykker ned i koden, skal du sikre dig, at du har et React-projekt oprettet med følgende:

React-version, der understøtter de eksperimentelle API'er (tjek Reacts dokumentation for den påkrævede version).
React Server Components aktiveret (bruges typisk i frameworks som Next.js eller Remix).

Eksempel: En simpel kontaktformular

Her er en grundlæggende kontaktformularkomponent:

```jsx // app/actions.js (Serverhandling) 'use server' export async function submitContactForm(formData) { // Simuler et databasekald eller en API-forespørgsel 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 felter er påkrævede.' }; } try { // Erstat med et faktisk API-kald eller en databaseoperation console.log('Formular sendt:', { name, email, message }); return { success: true, message: 'Formularen blev sendt succesfuldt!' }; } catch (error) { console.error('Fejl ved afsendelse af formular:', error); return { success: false, message: 'Kunne ikke sende formularen.' }; } } // app/components/ContactForm.jsx (Klientkomponent) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Navn:

E-mail:

Besked:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Forklaring</h3>

<ul>
  <li><b>Serverhandling (<code>app/actions.js</code>):</b> Denne fil definerer <code>submitContactForm</code>-funktionen, som er en serverhandling. Den simulerer en API-forespørgsel med en 2-sekunders forsinkelse for at demonstrere den asynkrone natur af formularafsendelse. Den håndterer også grundlæggende validering og fejlhåndtering.</li>
  <li><b>Klientkomponent (<code>app/components/ContactForm.jsx</code>):</b> Denne fil definerer <code>ContactForm</code>-komponenten, som er en klientkomponent. Den importerer <code>experimental_useFormStatus</code> hook'en og <code>submitContactForm</code>-handlingen.</li>
  <li><b>Brug af <code>useFormStatus</code>:</b> Inde i <code>SubmitButton</code>-komponenten kaldes <code>useFormStatus</code>. Denne hook giver information om formularens afsendelsesstatus.</li>
  <li><b><code>pending</code> Egenskab:</b> <code>pending</code>-egenskaben, der returneres af <code>useFormStatus</code>, angiver, om formularen i øjeblikket bliver sendt. Den bruges til at deaktivere afsendelsesknappen og vise en "Sender..."-besked.</li>
  <li><b>Formularbinding:</b> <code>form</code>-elementets <code>action</code>-prop er bundet til <code>submitContactForm</code>-serverhandlingen. Dette fortæller React at påkalde serverhandlingen, når formularen sendes.</li>
</ul>

<h2>Avanceret Brug og Overvejelser</h2>

<h3>Håndtering af Succes- og Fejltilstande</h3>

<p>Selvom <code>experimental_useFormStatus</code> forenkler sporingen af afsendelsesstatus, skal du ofte håndtere succes- og fejltilstande eksplicit. Serverhandlinger kan returnere data, der indikerer succes eller fiasko, som du derefter kan bruge til at opdatere brugergrænsefladen i overensstemmelse hermed.</p>

<p><b>Eksempel:</b></p>

```jsx
// app/components/ContactForm.jsx (Ændret)
'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 ? 'Sender...' : 'Send'}
    </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">Navn:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">E-mail:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Besked:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Forklaring:</b></p>

<ul>
  <li><b>State for beskeder:</b> En <code>message</code> state-variabel introduceres for at gemme resultatet, der returneres af serverhandlingen.</li>
  <li><b>Håndtering af resultatet:</b> Efter formularen er sendt, opdaterer <code>handleSubmit</code>-funktionen <code>message</code>-statet med resultatet fra serverhandlingen.</li>
  <li><b>Visning af beskeder:</b> Komponenten viser beskeden baseret på <code>success</code>-egenskaben i resultatet og anvender forskellige CSS-klasser for succes- og fejltilstande.</li>
</ul>

<h3>Progressiv Forbedring</h3>

<p><code>experimental_useFormStatus</code> skinner i scenarier med progressiv forbedring. Ved gradvist at forbedre en standard HTML-formular med React, kan du give en bedre brugeroplevelse uden at ofre grundlæggende funktionalitet, hvis JavaScript fejler.</p>

<p><b>Eksempel:</b></p>

<p>Vi starter med en grundlæggende HTML-formular:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Navn:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Besked:</label>
    <textarea id="message" name="message" required>

```

Du kan derefter gradvist forbedre den med React og experimental_useFormStatus.

```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 ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Brug null som initial state, hvis du ikke er afhængig af det return (

Navn:

E-mail:

Besked:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Forklaring:</b></p>

<ul>
  <li><b>Indledende HTML-formular:</b> Filen <code>public/contact.html</code> indeholder en standard HTML-formular, der vil fungere selv uden JavaScript.</li>
  <li><b>Progressiv forbedring:</b> Komponenten <code>EnhancedContactForm</code> forbedrer gradvist HTML-formularen. Hvis JavaScript er aktiveret, tager React over og giver en rigere brugeroplevelse.</li>
  <li><b><code>useFormState</code> Hook:</b> Bruger <code>useFormState</code> til at håndtere formularens state og binde serverhandlingen til formularen.</li>
	<li> <b><code>state</code>:</b> <code>state</code> fra <code>useFormState</code> indeholder nu returværdien fra serverhandlingen, som kan tjekkes for succes- eller fejlmeddelelser.</li>
</ul>

<h3>Internationale Overvejelser</h3>

<p>Når man implementerer formularer for et globalt publikum, er der flere internationale overvejelser, der spiller ind:</p>

<ul>
  <li><b>Lokalisering:</b> Sørg for, at dine formularetiketter, meddelelser og fejlmeddelelser er lokaliseret til forskellige sprog. Værktøjer som i18next kan hjælpe med at håndtere oversættelser.</li>
  <li><b>Dato- og talformater:</b> Håndter dato- og talformater i henhold til brugerens lokalitet. Brug biblioteker som <code>Intl</code> eller <code>moment.js</code> (til datoformatering, selvom det nu betragtes som forældet) til at formatere datoer og tal korrekt.</li>
  <li><b>Adresseformater:</b> Forskellige lande har forskellige adresseformater. Overvej at bruge et bibliotek, der understøtter flere adresseformater, eller opret brugerdefinerede formularfelter baseret på brugerens placering.</li>
  <li><b>Validering af telefonnummer:</b> Valider telefonnumre i henhold til internationale standarder. Biblioteker som <code>libphonenumber-js</code> kan hjælpe med dette.</li>
  <li><b>Højre-til-venstre (RTL) understøttelse:</b> Sørg for, at dit formularlayout understøtter RTL-sprog som arabisk eller hebraisk. Brug CSS logiske egenskaber (f.eks. <code>margin-inline-start</code> i stedet for <code>margin-left</code>) for bedre RTL-understøttelse.</li>
  <li><b>Tilgængelighed:</b> Overhold retningslinjer for tilgængelighed (WCAG) for at sikre, at dine formularer kan bruges af personer med handicap, uanset deres placering.</li>
</ul>

<p><b>Eksempel: Lokaliserede Formularetiketter</b></p>

```jsx
// i18n/locales/da.json
{
  "contactForm": {
    "nameLabel": "Navn",
    "emailLabel": "E-mail",
    "messageLabel": "Besked",
    "submitButton": "Send",
    "successMessage": "Formularen blev sendt succesfuldt!",
    "errorMessage": "Kunne ikke sende formularen."
  }
}

// i18n/locales/fr.json
{
  "contactForm": {
    "nameLabel": "Navn",
    "emailLabel": "E-mail",
    "messageLabel": "Besked",
    "submitButton": "Send",
    "successMessage": "Formularen blev sendt succesfuldt!",
    "errorMessage": "Kunne ikke sende formularen."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  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">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Forklaring:</b></p>

<ul>
  <li><b>Oversættelsesfiler:</b> Eksemplet bruger <code>react-i18next</code> til at håndtere oversættelser. Separate JSON-filer indeholder oversættelser til forskellige sprog.</li>
  <li><b><code>useTranslation</code> Hook:</b> <code>useTranslation</code> hook'en giver adgang til oversættelsesfunktionen (<code>t</code>), som bruges til at hente lokaliserede strenge.</li>
  <li><b>Lokaliserede etiketter:</b> Formularetiketterne og knapteksten hentes ved hjælp af <code>t</code>-funktionen, hvilket sikrer, at de vises på brugerens foretrukne sprog.</li>
</ul>

<h3>Overvejelser om Tilgængelighed</h3>

<p>Det er afgørende at sikre, at dine formularer er tilgængelige for alle brugere, inklusive dem med handicap. Her er nogle centrale overvejelser om tilgængelighed:</p>

<ul>
  <li><b>Semantisk HTML:</b> Brug semantiske HTML-elementer som <code><label></code>, <code><input></code>, <code><textarea></code>, og <code><button></code> korrekt.</li>
  <li><b>Etiketter:</b> Forbind etiketter med formularkontroller ved hjælp af <code>for</code>-attributten på <code><label></code> og <code>id</code>-attributten på formularkontrollen.</li>
  <li><b>ARIA-attributter:</b> Brug ARIA-attributter til at give yderligere information til hjælpemiddelteknologier. Brug f.eks. <code>aria-describedby</code> til at linke en formularkontrol til en beskrivelse.</li>
  <li><b>Fejlhåndtering:</b> Angiv tydeligt fejl og giv nyttige fejlmeddelelser. Brug ARIA-attributter som <code>aria-invalid</code> til at angive ugyldige formularkontroller.</li>
  <li><b>Tastaturnavigation:</b> Sørg for, at brugere kan navigere i formularen ved hjælp af tastaturet. Brug <code>tabindex</code>-attributten til at kontrollere fokusordenen, hvis det er nødvendigt.</li>
  <li><b>Farvekontrast:</b> Sørg for tilstrækkelig farvekontrast mellem tekst- og baggrundsfarver.</li>
  <li><b>Formularstruktur:</b> Brug en klar og ensartet formularstruktur. Grupper relaterede formularkontroller ved hjælp af <code><fieldset></code>- og <code><legend></code>-elementer.</li>
</ul>

<p><b>Eksempel: Tilgængelig Fejlhåndtering</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'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 ? 'Sender...' : 'Send'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Grundlæggende validering på klientsiden
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Navn er påkrævet.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'E-mail er påkrævet.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Besked er påkrævet.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Ryd tidligere fejl
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Navn:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">E-mail:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Besked:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Forklaring:</b></p>

<ul>
  <li><b>Fejltilstand:</b> Komponenten opretholder en <code>errors</code> state for at spore valideringsfejl.</li>
  <li><b>Validering på klientsiden:</b> <code>handleSubmit</code>-funktionen udfører grundlæggende validering på klientsiden, før formularen sendes.</li>
  <li><b>ARIA-attributter:</b> <code>aria-invalid</code>-attributten sættes til <code>true</code>, hvis der er en fejl for en specifik formularkontrol. <code>aria-describedby</code>-attributten linker formularkontrollen til fejlmeddelelsen.</li>
  <li><b>Fejlmeddelelser:</b> Fejlmeddelelser vises ved siden af de tilsvarende formularkontroller.</li>
</ul>

<h2>Potentielle Udfordringer og Begrænsninger</h2>

<ul>
  <li><b>Eksperimentel Status:</b> Da det er en eksperimentel API, kan <code>experimental_useFormStatus</code> blive ændret eller fjernet i fremtidige React-versioner. Det er vigtigt at holde sig opdateret med Reacts dokumentation og være parat til at tilpasse din kode, hvis det er nødvendigt.</li>
  <li><b>Begrænset Omfang:</b> Hook'en fokuserer primært på at spore afsendelsesstatus og giver ikke omfattende funktioner til formularhåndtering som validering eller datahåndtering. Du kan stadig have brug for at implementere yderligere logik for disse aspekter.</li>
  <li><b>Afhængighed af Serverhandlinger:</b> Hook'en er designet til at arbejde med serverhandlinger, hvilket måske ikke er egnet til alle anvendelsestilfælde. Hvis du ikke bruger serverhandlinger, skal du muligvis finde alternative løsninger til at håndtere formularstatus.</li>
</ul>

<h2>Konklusion</h2>

<p><code>experimental_useFormStatus</code> hook'en tilbyder en betydelig forbedring i håndteringen af formularafsendelsestilstande i React, især når man arbejder med serverhandlinger og progressiv forbedring. Ved at forenkle state-håndtering og levere en klar og koncis API forbedrer den både udvikler- og brugeroplevelsen. Men i betragtning af dens eksperimentelle natur er det afgørende at holde sig informeret om opdateringer og potentielle ændringer i fremtidige React-versioner. Ved at forstå dens fordele, begrænsninger og bedste praksis kan du effektivt udnytte <code>experimental_useFormStatus</code> til at bygge mere robuste og brugervenlige formularer i dine React-applikationer. Husk at overveje internationalisering og bedste praksis for tilgængelighed for at skabe inkluderende formularer for et globalt publikum.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formularstatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React-formularer</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">eksperimentel API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formularafsendelse</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asynkrone formularer</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiv forbedring</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>

Implementering af React experimental_useFormStatus: Forbedret Styring af Formularstatus

Hvad er experimental_useFormStatus?

Grundlæggende Implementering

Forudsætninger

Eksempel: En simpel kontaktformular

Hvad er `experimental_useFormStatus`?