`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：要使用的 HTTP 方法，例如 POST，預設為 GET。
encType：表單提交要使用的編碼類型：application/x-www-form-urlencoded、multipart/form-data、application/json 或 text/plain。預設為 application/x-www-form-urlencoded。
navigate：指定 false 以使用 fetcher 提交，而不是執行導航
fetcherKey：使用 fetcher 透過 navigate: false 提交時要使用的 fetcher 金鑰
preventScrollReset：防止提交資料時將捲動位置重設到視窗頂端。預設為 false。
replace：取代歷史堆疊中的目前項目，而不是推送新項目。預設為 false。
relative：定義相對路由解析行為。可以是 "route"（相對於路由階層）或 "path"（相對於 URL）。
flushSync：將此導航的初始狀態更新包裝在 ReactDOM.flushSync 呼叫中，而不是預設的 React.startTransition
viewTransition：透過將最終狀態更新包裝在 document.startViewTransition() 中，為此導航啟用檢視轉換
- 如果需要為此檢視轉換套用特定樣式，也需要利用 useViewTransitionState()

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

請參閱 useResolvedPath 文件中的 Splat 路徑章節，以了解有關 splat 路由中相對 useSubmit() 行為的 future.v3_relativeSplatPath 未來標誌的注意事項

額外資源

討論

表單 vs. Fetcher

相關 API