useFormStatus

const { pending, data, method, action } = useFormStatus();

• リファレンス
  • useFormStatus()
• 使用法
  • フォーム送信中にステータスを表示
  • ユーザが送信中のフォームデータを読み取る
• トラブルシューティング
  • status.pending が true にならない

リファレンス

useFormStatus()

useFormStatus フックは、直近のフォーム送信に関するステータス情報を提供します。

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

ステータス情報を取得するには、この Submit コンポーネントが <form> 内でレンダーされている必要があります。このフックは、フォームが送信中かどうかを示す pending プロパティなどの情報を返します。

上記の例では、Submit がこの情報を使用して、フォームが送信中の間 <button> を無効にして押せなくしています。

さらに例を見る

引数

useFormStatus は引数を受け取りません。

返り値

以下のプロパティを持つ status オブジェクト。

• pending: ブーリアン。true の場合、親 <form> で送信が進行中であることを意味します。それ以外の場合は false となります。

• data: FormData インターフェースを実装したオブジェクト。親 <form> が送信中のデータを含んでいます。送信がアクティブでない場合や親 <form> がない場合は null になります。

• method: 'get' または 'post' のいずれかの文字列。親