M

MLOG

Русский

Полное руководство по хуку useFormStatus в React, позволяющее разработчикам создавать увлекательный и информативный опыт отправки форм для глобальных пользователей.

React useFormStatus: Мастерство управления состоянием отправки формы

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

Что такое React useFormStatus?

useFormStatus — это хук React, который предоставляет информацию о статусе отправки формы. Он разработан для бесшовной работы с серверными действиями (server actions) — функцией, которая позволяет выполнять серверную логику непосредственно из ваших компонентов React. Хук возвращает объект, содержащий информацию о состоянии ожидания формы, данных и любых ошибках, возникших при отправке. Эта информация позволяет предоставлять пользователям обратную связь в реальном времени, например, отображать индикаторы загрузки, отключать элементы формы и выводить сообщения об ошибках.

Понимание серверных действий

Прежде чем углубляться в 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

Хук useFormStatus используется внутри компонента, который рендерит форму. Он должен использоваться внутри элемента <form>, который использует проп `action` с импортированным серверным действием. Хук возвращает объект со следующими свойствами:

Вот пример того, как использовать 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">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 already safes from 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">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 оптимизирует разработку, улучшает взаимодействие с пользователем и в конечном итоге способствует созданию более надежных и удобных для пользователя веб-приложений.

Помните о необходимости prioritizing доступности, интернационализации и производительности при создании форм для глобальной аудитории. Следуя лучшим практикам, изложенным в этом руководстве, вы можете создавать формы, которые удобны для всех, независимо от их местоположения или способностей. Этот подход способствует созданию более инклюзивного и доступного веба для всех пользователей.