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> プロパティと同じです。すべてのオプションはオプションです。

action: 送信先への href。デフォルトは現在のルートパスです。
method: 使用する HTTP メソッド（POST など）。デフォルトは 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 に対する相対) のいずれかです。
unstable_flushSync: このナビゲーションの初期状態の更新を、デフォルトの React.startTransition ではなく、ReactDOM.flushSync コールでラップします
unstable_viewTransition: document.startViewTransition() で最終的な状態の更新をラップすることにより、このナビゲーションのビュー遷移を有効にします
- このビュー遷移に特定のスタイルを適用する必要がある場合は、unstable_useViewTransitionState() も利用する必要があります

submit(data, {
  action: "",
  method: "post",
  encType: "application/x-www-form-urlencoded",
  preventScrollReset: false,
  replace: false,
  relative: "route",
});

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

追加のリソース

ディスカッション

フォーム vs. フェッチャー

関連 API

シグネチャ
targetOrData
options
追加のリソース