M

MLOG

中文

一份关于 React useFormStatus Hook 的全面指南，助力开发者为全球用户创造引人入胜、信息明确的表单提交体验。

React useFormStatus：掌握表单提交状态

表单是无数网络应用程序的支柱，是用户与服务器交互并提供数据的主要方式。确保表单提交流程顺畅且信息明确，对于创造积极的用户体验至关重要。React 18 引入了一个名为 useFormStatus 的强大 Hook，旨在简化表单提交状态的管理。本指南全面概述了 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: 'Please fill in all fields.' };
  }

  // 模拟成功提交
  return { message: `Form submitted successfully for ${name}!` };
}

此操作将表单数据作为输入，模拟延迟，然后返回成功或错误消息。'use server' 指令告诉 React 该函数应在服务器上执行。

useFormStatus 的工作原理

useFormStatus Hook 在渲染表单的组件内部使用。它需要在 <form> 元素内部使用，该元素的 `action` 属性需要传入导入的服务器操作。该 Hook 返回一个包含以下属性的对象：

以下是在 React 组件中使用 useFormStatus 的示例：

'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) 至关重要。以下是如何在使用 useFormStatus 时处理 i18n：

使用 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">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 ? 'Submitting...' : 'Submit'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

超越基础用法：高级技巧

虽然 useFormStatus 的基本用法很简单，但有几种高级技巧可以进一步增强您的表单提交体验：

常见问题故障排除

在使用 useFormStatus 时，您可能会遇到一些常见问题。以下是解决方法：

useFormStatus 的替代方案

虽然 useFormStatus 是一个强大的工具，但在旧版 React 或处理复杂的表单逻辑时，还有其他管理表单提交状态的方法：

方法的选择取决于表单的复杂性和您的具体需求。对于简单的表单，useFormStatus 通常是最直接、最高效的解决方案。对于更复杂的表单，表单库或全局状态管理解决方案可能更合适。

结论

useFormStatus 是 React 生态系统的一个宝贵补充，它简化了表单提交状态的管理，使开发者能够创造更具吸引力和信息量的用户体验。通过理解其功能、最佳实践和用例，您可以利用 useFormStatus 为全球受众构建可访问、国际化和高性能的表单。拥抱 useFormStatus 可以简化开发流程，增强用户交互，并最终有助于构建更健壮、更用户友好的网络应用程序。

在为全球受众构建表单时，请记住优先考虑可访问性、国际化和性能。通过遵循本指南中概述的最佳实践，您可以创建出每个人都可以使用的表单，无论他们身在何处或能力如何。这种方法有助于为所有用户创造一个更具包容性和可访问性的网络。