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

  • 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() でラップされます。
    • このビュー遷移に特定のスタイルを適用する必要がある場合は、useViewTransitionState() も利用する必要があります。
submit(data, {
  action: "",
  method: "post",
  encType: "application/x-www-form-urlencoded",
  preventScrollReset: false,
  replace: false,
  relative: "route",
});

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

関連リソース

ディスカッション

関連API