中文
探索 React 的 experimental_useFormStatus 钩子，以简化表单状态管理。 了解实现、优势以及在实际示例中的高级用法。
React experimental_useFormStatus 实现：增强表单状态管理
React 不断发展的格局不断引入工具和技术，以改善开发人员的体验和应用程序的性能。 其中一项实验性功能是 experimental_useFormStatus 钩子，旨在简化表单状态管理，尤其是在服务器操作和渐进增强方案中。 本综合指南将详细探讨 experimental_useFormStatus 钩子，并为其有效利用提供实用的示例和见解。
什么是 experimental_useFormStatus？
experimental_useFormStatus 钩子是 React 团队引入的实验性 API，旨在提供一种更直接的方式来跟踪表单提交的状态，尤其是在使用服务器操作时。 在此钩子之前，管理表单的不同状态（空闲、提交中、成功、错误）通常需要复杂的state管理逻辑。 experimental_useFormStatus 旨在抽象出大部分复杂性，从而提供一种简单有效的方式来监视表单提交状态并对其做出反应。
主要优点：
- 简化的状态管理： 减少了管理表单提交状态所需的样板代码。
- 增强的用户体验： 可以根据表单的状态进行更灵敏的 UI 更新。
- 提高代码可读性： 使与表单相关的代码更易于理解和维护。
- 与服务器操作的无缝集成： 旨在与 React 服务器组件和服务器操作配合使用。
基本实现
为了说明 experimental_useFormStatus 的基本实现，让我们考虑一个简单的联系表单示例。 此表单将收集用户的姓名、电子邮件和消息，然后使用服务器操作提交它。
先决条件
在深入研究代码之前，请确保您已设置了一个 React 项目，其中包含以下内容：
- 支持实验性 API 的 React 版本（请查看 React 的文档以获取所需的版本）。
- 已启用 React 服务器组件（通常在 Next.js 或 Remix 等框架中使用）。
示例：一个简单的联系表单
这是一个基本的联系表单组件：
```jsx // app/actions.js (Server Action) 'use server' export async function submitContactForm(formData) { // Simulate a database call or API request await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'All fields are required.' }; } try { // Replace with actual API call or database operation console.log('Form submitted:', { name, email, message }); return { success: true, message: 'Form submitted successfully!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'Failed to submit form.' }; } } // app/components/ContactForm.jsx (Client Component) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return ( ); } ```说明
- 服务器操作 (
app/actions.js)： 此文件定义了submitContactForm函数，该函数是一个服务器操作。 它模拟了一个 2 秒延迟的 API 请求，以演示表单提交的异步性质。 它还处理基本的验证和错误处理。 - 客户端组件 (
app/components/ContactForm.jsx)： 此文件定义了ContactForm组件，该组件是一个客户端组件。 它导入了experimental_useFormStatus钩子和submitContactForm操作。 useFormStatus用法： 在SubmitButton组件内部，调用useFormStatus。 此钩子提供有关表单提交状态的信息。pending属性：useFormStatus返回的pending属性指示当前是否正在提交表单。 它用于禁用提交按钮并显示“正在提交...”消息。- 表单绑定：
form元素的action属性绑定到submitContactForm服务器操作。 这告诉 React 在提交表单时调用服务器操作。
高级用法和注意事项
处理成功和错误状态
虽然 experimental_useFormStatus 简化了跟踪提交状态，但您通常需要显式处理成功和错误状态。 服务器操作可以返回指示成功或失败的数据，然后您可以使用这些数据相应地更新 UI。
示例：
```jsx // app/components/ContactForm.jsx (Modified) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return (
{message && (
);
}
```
{message.message}
)}说明：
- 消息状态： 引入了
message状态变量来存储服务器操作返回的结果。 - 处理结果： 提交表单后，
handleSubmit函数会使用服务器操作的结果更新message状态。 - 显示消息： 该组件根据结果的
success属性显示消息，为成功和错误状态应用不同的 CSS 类。
渐进增强
experimental_useFormStatus 在渐进增强方案中表现出色。 通过使用 React 渐进增强标准 HTML 表单，您可以在不牺牲基本功能（如果 JavaScript 失败）的情况下提供更好的用户体验。
示例：
从基本的 HTML 表单开始：
```html ```然后，您可以使用 React 和 experimental_useFormStatus 逐步增强它。
说明：
- 初始 HTML 表单：
public/contact.html文件包含一个标准的 HTML 表单，即使没有 JavaScript 也能运行。 - 渐进增强：
EnhancedContactForm组件逐步增强 HTML 表单。 如果启用了 JavaScript，React 将接管并提供更丰富的用户体验。 useFormState钩子： 使用useFormState管理表单状态并将服务器操作绑定到表单。-
state： 现在，来自useFormState的state包含服务器操作的返回值，可以检查该值以获取成功或错误消息。
国际化注意事项
当为全球受众实施表单时，需要考虑以下几个国际化注意事项：
- 本地化： 确保您的表单标签、消息和错误消息已本地化为不同的语言。 像 i18next 这样的工具可以帮助管理翻译。
- 日期和数字格式： 根据用户的区域设置处理日期和数字格式。 使用像
Intl或moment.js（用于日期格式化，尽管现在被认为是遗留的）这样的库来正确格式化日期和数字。 - 地址格式： 不同的国家/地区有不同的地址格式。 考虑使用支持多种地址格式的库，或者根据用户的位置创建自定义表单字段。
- 电话号码验证： 根据国际标准验证电话号码。 像
libphonenumber-js这样的库可以对此有所帮助。 - 从右到左 (RTL) 支持： 确保您的表单布局支持像阿拉伯语或希伯来语这样的 RTL 语言。 使用 CSS 逻辑属性（例如，
margin-inline-start而不是margin-left）以获得更好的 RTL 支持。 - 可访问性： 遵守可访问性指南 (WCAG)，以确保残疾人士可以使用您的表单，无论他们身在何处。
示例：本地化的表单标签
```jsx // i18n/locales/en.json { "contactForm": { "nameLabel": "Name", "emailLabel": "Email", "messageLabel": "Message", "submitButton": "Submit", "successMessage": "Form submitted successfully!", "errorMessage": "Failed to submit form." } } // i18n/locales/fr.json { "contactForm": { "nameLabel": "Nom", "emailLabel": "Courriel", "messageLabel": "Message", "submitButton": "Soumettre", "successMessage": "Formulaire soumis avec succès !", "errorMessage": "Échec de la soumission du formulaire." } } // app/components/LocalizedContactForm.jsx 'use client' import { useTranslation } from 'react-i18next'; import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() const { t } = useTranslation(); return ( ) } export default function LocalizedContactForm() { const { t } = useTranslation(); const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return (
{message && (
);
}
```
{message.message}
)}说明：
- 翻译文件： 该示例使用
react-i18next来管理翻译。 单独的 JSON 文件包含不同语言的翻译。 useTranslation钩子：useTranslation钩子提供对翻译函数 (t) 的访问，该函数用于检索本地化的字符串。- 本地化的标签： 表单标签和按钮文本使用
t函数检索，确保它们以用户首选的语言显示。
辅助功能注意事项
确保您的表单对所有用户（包括残疾人士）都可访问至关重要。 以下是一些关键的辅助功能注意事项：
- 语义 HTML： 正确使用语义 HTML 元素，如
<label>、<input>、<textarea>和<button>。 - 标签： 使用
<label>上的for属性和表单控件上的id属性将标签与表单控件相关联。 - ARIA 属性： 使用 ARIA 属性向辅助技术提供更多信息。 例如，使用
aria-describedby将表单控件链接到描述。 - 错误处理： 清楚地指示错误并提供有用的错误消息。 使用像
aria-invalid这样的 ARIA 属性来指示无效的表单控件。 - 键盘导航： 确保用户可以使用键盘导航表单。 如果需要，可以使用
tabindex属性来控制焦点顺序。 - 颜色对比度： 确保文本和背景颜色之间有足够的颜色对比度。
- 表单结构： 使用清晰一致的表单结构。 使用
<fieldset>和<legend>元素对相关的表单控件进行分组。
示例：可访问的错误处理
```jsx // app/components/AccessibleContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function AccessibleContactForm() { const [message, setMessage] = useState(null); const [errors, setErrors] = useState({}); async function handleSubmit(formData) { // Basic client-side validation const newErrors = {}; if (!formData.get('name')) { newErrors.name = 'Name is required.'; } if (!formData.get('email')) { newErrors.email = 'Email is required.'; } if (!formData.get('message')) { newErrors.message = 'Message is required.'; } if (Object.keys(newErrors).length > 0) { setErrors(newErrors); return; } setErrors({}); // Clear previous errors const result = await submitContactForm(formData); setMessage(result); } return (
{message && (
);
}
```
{message.message}
)}说明：
- 错误状态： 该组件维护一个
errors状态来跟踪验证错误。 - 客户端验证：
handleSubmit函数在提交表单之前执行基本的客户端验证。 - ARIA 属性： 如果特定表单控件存在错误，则将
aria-invalid属性设置为true。aria-describedby属性将表单控件链接到错误消息。 - 错误消息： 错误消息显示在相应的表单控件旁边。
潜在的挑战和局限性
- 实验性状态： 作为实验性 API，
experimental_useFormStatus在未来的 React 版本中可能会更改或删除。 必须随时了解 React 的文档，并准备好在必要时调整您的代码。 - 有限范围： 该钩子主要侧重于跟踪提交状态，不提供全面的表单管理功能，如验证或数据处理。 您可能仍然需要为这些方面实现额外的逻辑。
- 服务器操作依赖性： 该钩子旨在与服务器操作配合使用，这可能不适合所有用例。 如果您不使用服务器操作，您可能需要寻找替代解决方案来管理表单状态。
结论
experimental_useFormStatus 钩子在管理 React 中的表单提交状态方面提供了显着改进，尤其是在处理服务器操作和渐进增强时。 通过简化状态管理并提供清晰简洁的 API，它增强了开发人员体验和用户体验。 但是，鉴于其实验性质，必须随时了解未来 React 版本中的更新和潜在更改。 通过了解其优点、局限性和最佳实践，您可以有效地利用 experimental_useFormStatus 在您的 React 应用程序中构建更强大和用户友好的表单。 请记住考虑国际化和辅助功能的最佳实践，以便为全球受众创建包容性表单。