2. rujna 2025.Hrvatski

Istražite Reactov eksperimentalni hook experimental_useFormStatus za pojednostavljeno upravljanje statusom obrazaca. Naučite implementaciju, prednosti i naprednu upotrebu uz primjere iz stvarnog svijeta.

Implementacija React experimental_useFormStatus: Poboljšano upravljanje statusom obrazaca

Reactov ekosustav koji se neprestano razvija kontinuirano uvodi alate i tehnike za poboljšanje iskustva developera i performansi aplikacija. Jedna takva eksperimentalna značajka je experimental_useFormStatus hook, dizajniran da pojednostavi upravljanje statusom obrasca, posebno u scenarijima poslužiteljskih akcija i progresivnog poboljšanja. Ovaj sveobuhvatni vodič detaljno će istražiti experimental_useFormStatus hook, pružajući praktične primjere i uvide za njegovu učinkovitu upotrebu.

Što je `experimental_useFormStatus`?

experimental_useFormStatus hook je eksperimentalni API koji je uveo React tim kako bi pružio jednostavniji način praćenja statusa slanja obrasca, posebno pri korištenju poslužiteljskih akcija. Prije ovog hooka, upravljanje različitim stanjima obrasca (mirovanje, slanje, uspjeh, greška) često je zahtijevalo složenu logiku upravljanja stanjem. experimental_useFormStatus ima za cilj apstrahirati veći dio te složenosti, pružajući jednostavan i učinkovit način za praćenje i reagiranje na stanja slanja obrasca.

Ključne prednosti:

Pojednostavljeno upravljanje stanjem: Smanjuje količinu repetitivnog koda potrebnog za upravljanje stanjima slanja obrasca.
Poboljšano korisničko iskustvo: Omogućuje responzivnije ažuriranje korisničkog sučelja na temelju statusa obrasca.
Poboljšana čitljivost koda: Čini kod vezan uz obrasce lakšim za razumijevanje i održavanje.
Besprijekorna integracija s poslužiteljskim akcijama: Dizajniran je da posebno dobro radi s React Server Components i poslužiteljskim akcijama.

Osnovna implementacija

Kako bismo ilustrirali osnovnu implementaciju experimental_useFormStatus, razmotrimo jednostavan primjer kontaktnog obrasca. Ovaj obrazac će prikupljati ime, e-mail i poruku korisnika, a zatim ih poslati koristeći poslužiteljsku akciju.

Preduvjeti

Prije nego što zaronimo u kod, provjerite imate li postavljen React projekt sa sljedećim:

React verzija koja podržava eksperimentalne API-je (provjerite Reactovu dokumentaciju za potrebnu verziju).
Omogućene React Server Components (obično se koriste u frameworkovima poput Next.js ili Remix).

Primjer: Jednostavan kontaktni obrazac

Ovdje je osnovna komponenta kontaktnog obrasca:

```jsx // app/actions.js (Poslužiteljska akcija) 'use server' export async function submitContactForm(formData) { // Simulacija poziva baze podataka ili API zahtjeva 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: 'Sva polja su obavezna.' }; } try { // Zamijenite sa stvarnim API pozivom ili operacijom na bazi podataka console.log('Obrazac poslan:', { name, email, message }); return { success: true, message: 'Obrazac je uspješno poslan!' }; } catch (error) { console.error('Greška pri slanju obrasca:', error); return { success: false, message: 'Slanje obrasca nije uspjelo.' }; } } // app/components/ContactForm.jsx (Klijentska komponenta) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Ime:

Email:

Poruka:

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

<h3>Objašnjenje</h3>

<ul>
  <li><b>Poslužiteljska akcija (<code>app/actions.js</code>):</b> Ova datoteka definira funkciju <code>submitContactForm</code>, koja je poslužiteljska akcija. Simulira API zahtjev s kašnjenjem od 2 sekunde kako bi se demonstrirala asinkrona priroda slanja obrasca.  Također obrađuje osnovnu validaciju i rukovanje greškama.</li>
  <li><b>Klijentska komponenta (<code>app/components/ContactForm.jsx</code>):</b> Ova datoteka definira komponentu <code>ContactForm</code>, koja je klijentska komponenta. Uvozi <code>experimental_useFormStatus</code> hook i akciju <code>submitContactForm</code>.</li>
  <li><b>Upotreba <code>useFormStatus</code>:</b> Unutar komponente <code>SubmitButton</code>, poziva se <code>useFormStatus</code>. Ovaj hook pruža informacije o statusu slanja obrasca.</li>
  <li><b>Svojstvo <code>pending</code>:</b> Svojstvo <code>pending</code> koje vraća <code>useFormStatus</code> označava je li obrazac trenutno u procesu slanja. Koristi se za onemogućavanje gumba za slanje i prikazivanje poruke "Slanje...".</li>
  <li><b>Povezivanje obrasca:</b> Svojstvo <code>action</code> elementa <code>form</code> povezano je s poslužiteljskom akcijom <code>submitContactForm</code>.  To govori Reactu da pozove poslužiteljsku akciju kada se obrazac pošalje.</li>
</ul>

<h2>Napredna upotreba i razmatranja</h2>

<h3>Rukovanje stanjima uspjeha i greške</h3>

<p>Iako <code>experimental_useFormStatus</code> pojednostavljuje praćenje statusa slanja, često je potrebno eksplicitno rukovati stanjima uspjeha i greške. Poslužiteljske akcije mogu vratiti podatke koji ukazuju na uspjeh ili neuspjeh, koje zatim možete koristiti za odgovarajuće ažuriranje korisničkog sučelja.</p>

<p><b>Primjer:</b></p>

```jsx
// app/components/ContactForm.jsx (Izmijenjeno)
'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 ? 'Slanje...' : 'Pošalji'}
    </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">Ime:</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">Poruka:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Objašnjenje:</b></p>

<ul>
  <li><b>Stanje za poruke:</b> Uvodi se varijabla stanja <code>message</code> za pohranu rezultata vraćenog od strane poslužiteljske akcije.</li>
  <li><b>Rukovanje rezultatom:</b> Nakon što se obrazac pošalje, funkcija <code>handleSubmit</code> ažurira stanje <code>message</code> s rezultatom iz poslužiteljske akcije.</li>
  <li><b>Prikazivanje poruka:</b> Komponenta prikazuje poruku na temelju svojstva <code>success</code> rezultata, primjenjujući različite CSS klase za stanja uspjeha i greške.</li>
</ul>

<h3>Progresivno poboljšanje</h3>

<p><code>experimental_useFormStatus</code> se ističe u scenarijima progresivnog poboljšanja. Progresivnim poboljšanjem standardnog HTML obrasca s Reactom, možete pružiti bolje korisničko iskustvo bez žrtvovanja osnovne funkcionalnosti ako JavaScript zakaže.</p>

<p><b>Primjer:</b></p>

<p>Počevši s osnovnim HTML obrascem:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Ime:</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">Poruka:</label>
    <textarea id="message" name="message" required>

```

Zatim ga možete progresivno poboljšati s Reactom i 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); // Koristite null kao početno stanje ako se ne oslanjate na njega return (

Ime:

Email:

Poruka:

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

<p><b>Objašnjenje:</b></p>

<ul>
  <li><b>Početni HTML obrazac:</b>  Datoteka <code>public/contact.html</code> sadrži standardni HTML obrazac koji će funkcionirati čak i bez JavaScripta.</li>
  <li><b>Progresivno poboljšanje:</b> Komponenta <code>EnhancedContactForm</code> progresivno poboljšava HTML obrazac. Ako je JavaScript omogućen, React preuzima kontrolu i pruža bogatije korisničko iskustvo.</li>
  <li><b><code>useFormState</code> Hook:</b> Koristi <code>useFormState</code> za upravljanje stanjem obrasca i povezivanje poslužiteljske akcije s obrascem.</li>
	<li> <b><code>state</code>:</b> <code>state</code> iz <code>useFormState</code> sada sadrži povratnu vrijednost iz poslužiteljske akcije, koja se može provjeriti za poruke o uspjehu ili grešci.</li>
</ul>

<h3>Međunarodna razmatranja</h3>

<p>Prilikom implementacije obrazaca za globalnu publiku, u obzir dolaze nekoliko međunarodnih razmatranja:</p>

<ul>
  <li><b>Lokalizacija:</b> Osigurajte da su vaše oznake obrazaca, poruke i poruke o greškama lokalizirane na različite jezike.  Alati poput i18next mogu pomoći u upravljanju prijevodima.</li>
  <li><b>Formati datuma i brojeva:</b> Rukujte formatima datuma i brojeva u skladu s lokalnim postavkama korisnika.  Koristite biblioteke poput <code>Intl</code> ili <code>moment.js</code> (za formatiranje datuma, iako se sada smatra zastarjelim) za ispravno formatiranje datuma i brojeva.</li>
  <li><b>Formati adresa:</b> Različite zemlje imaju različite formate adresa. Razmislite o korištenju biblioteke koja podržava više formata adresa ili o stvaranju prilagođenih polja obrasca na temelju lokacije korisnika.</li>
  <li><b>Validacija telefonskih brojeva:</b> Validirajte telefonske brojeve prema međunarodnim standardima. Biblioteke poput <code>libphonenumber-js</code> mogu pomoći u tome.</li>
  <li><b>Podrška za desno-na-lijevo (RTL):</b> Osigurajte da vaš izgled obrasca podržava RTL jezike poput arapskog ili hebrejskog. Koristite CSS logička svojstva (npr. <code>margin-inline-start</code> umjesto <code>margin-left</code>) za bolju RTL podršku.</li>
  <li><b>Pristupačnost:</b>  Pridržavajte se smjernica za pristupačnost (WCAG) kako biste osigurali da su vaši obrasci upotrebljivi za osobe s invaliditetom, bez obzira na njihovu lokaciju.</li>
</ul>

<p><b>Primjer: Lokalizirane oznake obrasca</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/hr.json
{
  "contactForm": {
    "nameLabel": "Ime",
    "emailLabel": "Email",
    "messageLabel": "Poruka",
    "submitButton": "Pošalji",
    "successMessage": "Obrazac je uspješno poslan!",
    "errorMessage": "Slanje obrasca nije uspjelo."
  }
}

// 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>Objašnjenje:</b></p>

<ul>
  <li><b>Datoteke s prijevodima:</b> Primjer koristi <code>react-i18next</code> za upravljanje prijevodima.  Zasebne JSON datoteke sadrže prijevode za različite jezike.</li>
  <li><b><code>useTranslation</code> Hook:</b>  <code>useTranslation</code> hook pruža pristup funkciji prevođenja (<code>t</code>), koja se koristi za dohvaćanje lokaliziranih stringova.</li>
  <li><b>Lokalizirane oznake:</b>  Oznake obrasca i tekst gumba dohvaćaju se pomoću funkcije <code>t</code>, osiguravajući da se prikazuju na preferiranom jeziku korisnika.</li>
</ul>

<h3>Razmatranja o pristupačnosti</h3>

<p>Osiguravanje da su vaši obrasci pristupačni svim korisnicima, uključujući one s invaliditetom, je ključno. Ovdje su neka ključna razmatranja o pristupačnosti:</p>

<ul>
  <li><b>Semantički HTML:</b> Koristite semantičke HTML elemente kao što su <code><label></code>, <code><input></code>, <code><textarea></code>, i <code><button></code> ispravno.</li>
  <li><b>Oznake:</b> Povežite oznake s kontrolama obrasca koristeći atribut <code>for</code> na <code><label></code> i atribut <code>id</code> na kontroli obrasca.</li>
  <li><b>ARIA atributi:</b> Koristite ARIA atribute za pružanje dodatnih informacija pomoćnim tehnologijama. Na primjer, koristite <code>aria-describedby</code> za povezivanje kontrole obrasca s opisom.</li>
  <li><b>Rukovanje greškama:</b> Jasno naznačite greške i pružite korisne poruke o greškama. Koristite ARIA atribute poput <code>aria-invalid</code> za označavanje nevažećih kontrola obrasca.</li>
  <li><b>Navigacija tipkovnicom:</b> Osigurajte da korisnici mogu navigirati obrascem pomoću tipkovnice. Koristite atribut <code>tabindex</code> za kontrolu redoslijeda fokusa ako je potrebno.</li>
  <li><b>Kontrast boja:</b> Osigurajte dovoljan kontrast boja između teksta i pozadine.</li>
  <li><b>Struktura obrasca:</b> Koristite jasnu i dosljednu strukturu obrasca. Grupirajte povezane kontrole obrasca koristeći <code><fieldset></code> i <code><legend></code> elemente.</li>
</ul>

<p><b>Primjer: Pristupačno rukovanje greškama</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 ? 'Slanje...' : 'Pošalji'}
    </button>
  )
}

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

async function handleSubmit(formData) {
    // Osnovna validacija na strani klijenta
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Ime je obavezno.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email je obavezan.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Poruka je obavezna.';
    }

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

setErrors({}); // Očisti prethodne greške
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Ime:</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">Email:</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">Poruka:</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>Objašnjenje:</b></p>

<ul>
  <li><b>Stanje greške:</b> Komponenta održava stanje <code>errors</code> za praćenje validacijskih grešaka.</li>
  <li><b>Validacija na strani klijenta:</b>  Funkcija <code>handleSubmit</code> izvodi osnovnu validaciju na strani klijenta prije slanja obrasca.</li>
  <li><b>ARIA atributi:</b> Atribut <code>aria-invalid</code> postavljen je na <code>true</code> ako postoji greška za određenu kontrolu obrasca. Atribut <code>aria-describedby</code> povezuje kontrolu obrasca s porukom o grešci.</li>
  <li><b>Poruke o greškama:</b> Poruke o greškama prikazuju se pored odgovarajućih kontrola obrasca.</li>
</ul>

<h2>Potencijalni izazovi i ograničenja</h2>

<ul>
  <li><b>Eksperimentalni status:</b> Budući da je eksperimentalni API, <code>experimental_useFormStatus</code> je podložan promjenama ili uklanjanju u budućim verzijama Reacta. Bitno je ostati ažuriran s Reactovom dokumentacijom i biti spreman prilagoditi svoj kod ako je potrebno.</li>
  <li><b>Ograničen opseg:</b> Hook se prvenstveno fokusira na praćenje statusa slanja i ne pruža sveobuhvatne značajke upravljanja obrascima poput validacije ili rukovanja podacima.  Možda ćete i dalje morati implementirati dodatnu logiku za te aspekte.</li>
  <li><b>Ovisnost o poslužiteljskim akcijama:</b> Hook je dizajniran za rad s poslužiteljskim akcijama, što možda nije prikladno za sve slučajeve upotrebe.  Ako ne koristite poslužiteljske akcije, možda ćete morati pronaći alternativna rješenja za upravljanje statusom obrasca.</li>
</ul>

<h2>Zaključak</h2>

<p><code>experimental_useFormStatus</code> hook nudi značajno poboljšanje u upravljanju stanjima slanja obrazaca u Reactu, posebno pri radu s poslužiteljskim akcijama i progresivnim poboljšanjem. Pojednostavljivanjem upravljanja stanjem i pružanjem jasnog i sažetog API-ja, poboljšava i iskustvo developera i korisničko iskustvo.  Međutim, s obzirom na njegovu eksperimentalnu prirodu, ključno je ostati informiran o ažuriranjima i potencijalnim promjenama u budućim verzijama Reacta.  Razumijevanjem njegovih prednosti, ograničenja i najboljih praksi, možete učinkovito iskoristiti <code>experimental_useFormStatus</code> za izgradnju robusnijih i korisnički prihvatljivijih obrazaca u svojim React aplikacijama. Ne zaboravite uzeti u obzir internacionalizaciju i pristupačnost kao najbolje prakse kako biste stvorili inkluzivne obrasce za globalnu publiku.</p></div><template id="P:4"></template></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><div hidden id="S:4"><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">status obrasca</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 obrasci</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">eksperimentalni 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">slanje obrasca</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">asinkroni obrasci</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">progresivno poboljšanje</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>

Implementacija React experimental_useFormStatus: Poboljšano upravljanje statusom obrazaca

Što je experimental_useFormStatus?

Osnovna implementacija

Preduvjeti

Primjer: Jednostavan kontaktni obrazac

Što je `experimental_useFormStatus`?