ビルトイン React DOM Hooks

react-dom パッケージには、Web アプリケーション（ブラウザの DOM 環境で実行される）でのみサポートされる Hooks が含まれています。これらの Hooks は、iOS、Android、Windows アプリケーションなどのブラウザ以外の環境ではサポートされていません。Web ブラウザ*と他の環境の両方*でサポートされている Hooks を探している場合は、React Hooks のページをご覧ください。このページでは、react-dom パッケージのすべての Hooks を一覧表示します。

フォーム Hooks

*フォーム*を使用すると、情報を送信するためのインタラクティブなコントロールを作成できます。コンポーネントでフォームを管理するには、次のいずれかの Hooks を使用します。

useFormStatusを使用すると、フォームの状態に基づいて UI を更新できます。

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