M

MLOG

Български

Ръководство за useFormStatus в React за създаване на ангажиращи изживявания при изпращане на формуляри за потребители по целия свят.

React useFormStatus: Овладяване на състоянието при изпращане на формуляри

Формулярите са гръбнакът на безброй уеб приложения, служейки като основно средство за взаимодействие на потребителите и предоставяне на данни към сървърите. Осигуряването на плавен и информативен процес на изпращане на формуляри е от решаващо значение за създаването на положително потребителско изживяване. React 18 въведе мощен hook, наречен useFormStatus, предназначен да опрости управлението на състоянието при изпращане на формуляри. Това ръководство предоставя изчерпателен преглед на useFormStatus, изследвайки неговите функции, случаи на употреба и най-добри практики за изграждане на достъпни и ангажиращи формуляри за глобална аудитория.

Какво е React useFormStatus?

useFormStatus е React Hook, който предоставя информация за статуса на изпращане на формуляр. Той е проектиран да работи безпроблемно със сървърни действия (server actions) – функция, която ви позволява да изпълнявате логика от страна на сървъра директно от вашите React компоненти. Hook-ът връща обект, съдържащ информация за състоянието на изчакване на формуляра, данните и всякакви грешки, възникнали по време на изпращането. Тази информация ви позволява да предоставяте обратна връзка в реално време на потребителите, като например показване на индикатори за зареждане, деактивиране на елементи на формуляра и показване на съобщения за грешки.

Разбиране на сървърните действия (Server Actions)

Преди да се потопим в useFormStatus, е важно да разберем сървърните действия. Сървърните действия са асинхронни функции, които се изпълняват на сървъра и могат да бъдат извикани директно от React компоненти. Те се дефинират с помощта на директивата 'use server' в горната част на файла. Сървърните действия обикновено се използват за задачи като:

Ето един прост пример за сървърно действие:

// actions.js
'use server';

export async function submitForm(formData) {
  // Симулираме забавяне, за да имитираме заявка към сървъра
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Моля, попълнете всички полета.' };
  }

  // Симулираме успешно изпращане
  return { message: `Формулярът е изпратен успешно за ${name}!` };
}

Това действие приема данни от формуляра като вход, симулира забавяне и след това връща съобщение за успех или грешка. Директивата 'use server' казва на React, че тази функция трябва да се изпълни на сървъра.

Как работи useFormStatus

Hook-ът useFormStatus се използва в компонент, който рендира формуляр. Той трябва да се използва вътре в елемент <form>, който използва пропса `action` с импортираното сървърно действие. Hook-ът връща обект със следните свойства:

Ето пример как да използвате useFormStatus в React компонент:

'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">Име:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">Имейл:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Изпращане...' : 'Изпрати'}
      </button>
      {error && <p style={{ color: 'red' }}>Грешка: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

В този пример:

Предимства на използването на useFormStatus

useFormStatus предлага няколко предимства за управление на състоянието при изпращане на формуляри:

Най-добри практики при използване на useFormStatus

За да увеличите максимално ползите от useFormStatus, вземете предвид следните най-добри практики:

Случаи на употреба за useFormStatus

useFormStatus е приложим в широк спектър от сценарии:

Интернационализация (i18n)

Когато изграждате формуляри за глобална аудитория, интернационализацията (i18n) е от решаващо значение. Ето как да подходите към i18n, когато използвате useFormStatus:

Пример с 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 вече предпазва от 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;

Съображения за достъпност

Осигуряването на достъпност е от първостепенно значение при изграждането на формуляри. Ето как да направите вашите формуляри по-достъпни, когато използвате useFormStatus:

Пример с ARIA атрибути:

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">Име:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Показва дали има грешка
        aria-describedby={error ? 'name-error' : null} // Свързва съобщението за грешка
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">Имейл:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Изпращане...' : 'Изпрати'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Отвъд основната употреба: Напреднали техники

Въпреки че основната употреба на useFormStatus е проста, няколко напреднали техники могат допълнително да подобрят изживяването при изпращане на формуляри:

Отстраняване на често срещани проблеми

Докато използвате useFormStatus, може да срещнете някои често срещани проблеми. Ето как да ги отстраните:

Алтернативи на useFormStatus

Въпреки че useFormStatus е мощен инструмент, съществуват алтернативни подходи за управление на състоянието при изпращане на формуляри, особено в по-стари версии на React или при работа със сложна логика на формуляри:

Изборът на подход зависи от сложността на вашия формуляр и вашите специфични изисквания. За прости формуляри useFormStatus често е най-простото и ефективно решение. За по-сложни формуляри, библиотека за формуляри или решение за глобално управление на състоянието може да бъде по-подходящо.

Заключение

useFormStatus е ценно допълнение към екосистемата на React, което опростява управлението на състоянието при изпращане на формуляри и позволява на разработчиците да създават по-ангажиращи и информативни потребителски изживявания. Като разбирате неговите функции, най-добри практики и случаи на употреба, можете да използвате useFormStatus за изграждане на достъпни, интернационализирани и производителни формуляри за глобална аудитория. Възприемането на useFormStatus оптимизира разработката, подобрява взаимодействието с потребителя и в крайна сметка допринася за по-стабилни и лесни за използване уеб приложения.

Не забравяйте да дадете приоритет на достъпността, интернационализацията и производителността, когато изграждате формуляри за глобална аудитория. Като следвате най-добрите практики, описани в това ръководство, можете да създавате формуляри, които са използваеми от всеки, независимо от неговото местоположение или способности. Този подход допринася за по-приобщаващ и достъпен уеб за всички потребители.