内置 React DOM 钩子

react-dom 包包含仅支持 Web 应用（在浏览器 DOM 环境中运行）的 Hook。这些钩子在 iOS、Android 或 Windows 应用等非浏览器环境中不受支持。如果你正在寻找 Web 浏览器和其他环境支持的 Hook，请参阅 React 钩子页面。本页列出了 react-dom 包中的所有 Hook。

¥The react-dom package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers and other environments see the React Hooks page. This page lists all the Hooks in the react-dom package.

表单钩子

¥Form Hooks

Canary

Form 钩子目前仅在 React 的 canary 和实验通道中可用。了解有关 React 的发布渠道在这里的更多信息。

¥Form Hooks are currently only available in React’s canary and experimental channels. Learn more about React’s release channels here.

表单允许你创建用于提交信息的交互式控件。要管理组件中的表单，请使用以下钩子之一：

¥Forms let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:

useFormStatus 允许你根据表单的状态更新 UI。

¥useFormStatus allows you to make updates to the UI based on the status of the a form.

function Form({ action }) {
  async function increment(n) {
    return n + 1;
  }
  const [count, incrementFormAction] = useActionState(increment, 0);
  return (
    <form action={action}>
      <button formAction={incrementFormAction}>Count: {count}</button>
      <Button />
    </form>
  );
}

function Button() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Submit
    </button>
  );
}

下一章useFormStatus