Remix ドキュメント 日本語版

English

useSubmit

<Form> の命令型バージョンで、ユーザーではなくプログラマーがフォームを送信できるようにします。

import { useSubmit } from "@remix-run/react";
 
function SomeComponent() {
  const submit = useSubmit();
  return (
    <Form
      onChange={(event) => {
        submit(event.currentTarget);
      }}
    />
  );
}

シグネチャ

submit(targetOrData, options);

targetOrData

次のいずれかを指定できます。

HTMLFormElement インスタンス

<Form
  onSubmit={(event) => {
    submit(event.currentTarget);
  }}
/>

FormData インスタンス

const formData = new FormData();
formData.append("myKey", "myValue");
submit(formData, { method: "post" });

FormData としてシリアライズされるプレーンオブジェクト

submit({ myKey: "myValue" }, { method: "post" });

JSON としてシリアライズされるプレーンオブジェクト

submit(
  { myKey: "myValue" },
  { method: "post", encType: "application/json" }
);

options

送信のオプションで、<Form> の props と同じです。すべてのオプションは省略可能です。

  • action: 送信する href。デフォルトは現在のルートパスです。
  • method: POST のような使用する HTTP メソッド。デフォルトは GET です。
  • encType: フォーム送信に使用するエンコードタイプ: application/x-www-form-urlencoded、multipart/form-data、application/json、または text/plain。デフォルトは application/x-www-form-urlencoded です。
  • navigate: ナビゲーションを実行する代わりに、フェッチャーを使用して送信する場合は false を指定します。
  • fetcherKey: navigate: false を介してフェッチャーを使用して送信する場合に使用するフェッチャーキー。
  • preventScrollReset: データが送信されたときに、スクロール位置がウィンドウの上部にリセットされるのを防ぎます。デフォルトは false です。
  • replace: 新しいエントリをプッシュする代わりに、履歴スタック内の現在のエントリを置き換えます。デフォルトは false です。
  • relative: 相対ルート解決の動作を定義します。"route" (ルート階層に対して相対的) または "path" (URL に対して相対的) のいずれかです。
  • flushSync: このナビゲーションの初期状態の更新を、デフォルトの React.startTransition 呼び出しの代わりに ReactDOM.flushSync 呼び出しでラップします。
  • viewTransition: 最終的な状態の更新を document.startViewTransition() でラップすることにより、このナビゲーションの View Transition を有効にします。
    • このビュー遷移に特定のスタイルを適用する必要がある場合は、useViewTransitionState() も活用する必要があります。
submit(data, {
  action: "",
  method: "post",
  encType: "application/x-www-form-urlencoded",
  preventScrollReset: false,
  replace: false,
  relative: "route",
});

スプラットルート内の相対的な useSubmit() の動作に関する future.v3_relativeSplatPath future フラグの動作については、useResolvedPath ドキュメントの スプラットパス セクションを参照してください。

追加リソース

ディスカッション

関連 API