M

MLOG

Lietuvių

Išsamus React useFormStatus hook'o vadovas, padedantis programuotojams kurti įtraukias ir informatyvias formų pateikimo patirtis pasaulio vartotojams.

React useFormStatus: Formos pateikimo būsenos įvaldymas

Formos yra daugybės interneto programų pagrindas, pagrindinė priemonė vartotojams sąveikauti su serveriais ir teikti jiems duomenis. Sklandaus ir informatyvaus formos pateikimo proceso užtikrinimas yra itin svarbus norint sukurti teigiamą vartotojo patirtį. React 18 pristatė galingą hook'ą, vadinamą useFormStatus, skirtą supaprastinti formos pateikimo būsenos valdymą. Šis vadovas pateikia išsamią useFormStatus apžvalgą, nagrinėja jo funkcijas, panaudojimo atvejus ir geriausias praktikas, kaip kurti prieinamas ir įtraukiančias formas pasaulinei auditorijai.

Kas yra React useFormStatus?

useFormStatus yra React Hook'as, teikiantis informaciją apie formos pateikimo būseną. Jis sukurtas sklandžiai veikti su serverio veiksmais (server actions) – funkcija, leidžiančia vykdyti serverio logiką tiesiogiai iš jūsų React komponentų. Hook'as grąžina objektą, kuriame yra informacija apie formos laukimo būseną, duomenis ir visas klaidas, įvykusias pateikimo metu. Ši informacija leidžia jums teikti grįžtamąjį ryšį vartotojams realiuoju laiku, pavyzdžiui, rodyti krovimo indikatorius, išjungti formos elementus ir rodyti klaidų pranešimus.

Serverio veiksmų supratimas

Prieš gilinantis į useFormStatus, būtina suprasti serverio veiksmus. Serverio veiksmai yra asinchroninės funkcijos, kurios veikia serveryje ir gali būti iškviestos tiesiogiai iš React komponentų. Jos apibrėžiamos naudojant 'use server' direktyvą failo viršuje. Serverio veiksmai dažniausiai naudojami tokioms užduotims kaip:

Štai paprastas serverio veiksmo pavyzdys:

// actions.js
'use server';

export async function submitForm(formData) {
  // Imituojamas delsimas, siekiant atkartoti serverio užklausą
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Užpildykite visus laukus.' };
  }

  // Imituojamas sėkmingas pateikimas
  return { message: `Forma sėkmingai pateikta vartotojui ${name}!` };
}

Šis veiksmas priima formos duomenis kaip įvestį, imituoja delsą ir tada grąžina sėkmės arba klaidos pranešimą. 'use server' direktyva nurodo React, kad ši funkcija turėtų būti vykdoma serveryje.

Kaip veikia useFormStatus

useFormStatus hook'as naudojamas komponente, kuris atvaizduoja formą. Jis turi būti naudojamas <form> elemento viduje, kuris naudoja `action` atributą su importuotu serverio veiksmu. Hook'as grąžina objektą su šiomis savybėmis:

Štai pavyzdys, kaip naudoti useFormStatus React komponente:

'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">Vardas:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">El. paštas:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Pateikiama...' : 'Pateikti'}
      </button>
      {error && <p style={{ color: 'red' }}>Klaida: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

Šiame pavyzdyje:

useFormStatus naudojimo privalumai

useFormStatus siūlo keletą privalumų valdant formos pateikimo būseną:

Geriausios useFormStatus naudojimo praktikos

Norėdami maksimaliai išnaudoti useFormStatus privalumus, atsižvelkite į šias geriausias praktikas:

useFormStatus panaudojimo atvejai

useFormStatus yra taikomas įvairiuose scenarijuose:

Tarptautinimo (i18n) sprendimai

Kuriant formas pasaulinei auditorijai, tarptautinimas (i18n) yra labai svarbus. Štai kaip spręsti i18n problemas naudojant useFormStatus:

Pavyzdys su i18next:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import lt from './locales/lt.json'; // Pakeista iš fr į lt

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      lt: { translation: lt }, // Pakeista iš fr į lt
    },
    lng: 'lt', // Nustatyta lietuvių kalba
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // react jau apsaugo nuo 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;

Prieinamumo aspektai

Užtikrinti prieinamumą kuriant formas yra svarbiausia. Štai kaip padaryti jūsų formas prieinamesnes naudojant useFormStatus:

Pavyzdys su ARIA atributais:

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">Vardas:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Nurodo, ar yra klaida
        aria-describedby={error ? 'name-error' : null} // Susieja klaidos pranešimą
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">El. paštas:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Pateikiama...' : 'Pateikti'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Daugiau nei pagrindai: pažangios technikos

Nors pagrindinis useFormStatus naudojimas yra paprastas, kelios pažangios technikos gali dar labiau pagerinti jūsų formos pateikimo patirtį:

Dažniausių problemų sprendimas

Naudodami useFormStatus, galite susidurti su kai kuriomis dažnomis problemomis. Štai kaip jas spręsti:

useFormStatus alternatyvos

Nors useFormStatus yra galingas įrankis, yra alternatyvių būdų valdyti formos pateikimo būseną, ypač senesnėse React versijose arba dirbant su sudėtinga formų logika:

Pasirinkimas priklauso nuo jūsų formos sudėtingumo ir specifinių reikalavimų. Paprastoms formoms useFormStatus dažnai yra pats tiesiausias ir efektyviausias sprendimas. Sudėtingesnėms formoms gali būti tinkamesnė formų biblioteka arba globalus būsenos valdymo sprendimas.

Išvados

useFormStatus yra vertingas papildymas React ekosistemai, supaprastinantis formos pateikimo būsenos valdymą ir leidžiantis programuotojams kurti labiau įtraukiančias ir informatyvias vartotojo patirtis. Suprasdami jo funkcijas, geriausias praktikas ir panaudojimo atvejus, galite panaudoti useFormStatus kurdami prieinamas, tarptautintas ir našias formas pasaulinei auditorijai. useFormStatus naudojimas supaprastina kūrimo procesą, pagerina vartotojo sąveiką ir galiausiai prisideda prie patikimesnių ir patogesnių interneto programų kūrimo.

Nepamirškite teikti pirmenybės prieinamumui, tarptautinimui ir našumui kuriant formas pasaulinei auditorijai. Laikydamiesi šiame vadove aprašytų geriausių praktikų, galite sukurti formas, kurias gali naudoti visi, nepriklausomai nuo jų buvimo vietos ar gebėjimų. Šis požiūris prisideda prie labiau įtraukiančio ir prieinamo interneto visiems vartotojams.