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) {
  // Simulate a delay to mimic a server request
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Please fill in all fields.' };
  }

  // Simulate successful submission
  return { message: `Form submitted successfully for ${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">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 ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {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">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Indicate if there's an error
        aria-describedby={error ? 'name-error' : null} // Associate error message
      />
      {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 ? 'Submitting...' : 'Submit'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

За межами базового використання: Просунуті техніки

Хоча базове використання useFormStatus є простим, існує кілька просунутих технік, які можуть ще більше покращити ваш досвід відправки форм:

Вирішення поширених проблем

Під час використання useFormStatus ви можете зіткнутися з деякими поширеними проблемами. Ось як їх вирішити:

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

Хоча useFormStatus є потужним інструментом, існують альтернативні підходи до керування станом відправки форми, особливо в старих версіях React або при роботі зі складною логікою форм:

Вибір підходу залежить від складності вашої форми та ваших конкретних вимог. Для простих форм useFormStatus часто є найпростішим та найефективнішим рішенням. Для більш складних форм бібліотека для форм або рішення для глобального керування станом може бути більш доречним.

Висновок

useFormStatus є цінним доповненням до екосистеми React, що спрощує керування станом відправки форми та дозволяє розробникам створювати більш захопливий та інформативний користувацький досвід. Розуміючи його можливості, найкращі практики та випадки використання, ви можете ефективно використовувати useFormStatus для створення доступних, інтернаціоналізованих та продуктивних форм для глобальної аудиторії. Використання useFormStatus оптимізує розробку, покращує взаємодію з користувачем і, зрештою, сприяє створенню більш надійних та зручних веб-додатків.

Не забувайте надавати пріоритет доступності, інтернаціоналізації та продуктивності при створенні форм для глобальної аудиторії. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете створювати форми, якими зможе користуватися кожен, незалежно від його місцезнаходження чи можливостей. Такий підхід сприяє створенню більш інклюзивного та доступного вебу для всіх користувачів.