useSubmit<Form> 的命令式版本，讓程式設計師，而不是使用者，提交表單。
舉例來說，表單中只要有值變動，就會提交表單。
import { useSubmit, Form } from "react-router-dom";
function SearchField() {
let submit = useSubmit();
return (
<Form
onChange={(event) => {
submit(event.currentTarget);
}}
>
<input type="text" name="search" />
<button type="submit">Search</button>
</Form>
);
}
如果你想在一段時間內沒有動作後自動將某人登出網站，這個功能也會派上用場。在本例中，我們將「沒有動作」定義為使用者在 5 分鐘後沒有瀏覽到其他頁面。
import { useSubmit, useLocation } from "react-router-dom";
import { useEffect } from "react";
function AdminPage() {
useSessionTimeout();
return <div>{/* ... */}</div>;
}
function useSessionTimeout() {
const submit = useSubmit();
const location = useLocation();
useEffect(() => {
const timer = setTimeout(() => {
submit(null, { method: "post", action: "/logout" });
}, 5 * 60_000);
return () => clearTimeout(timer);
}, [submit, location]);
}
submit 的第一個參數接受許多不同的值。
你可以提交任何表單或表單輸入元件。
// input element events
<input onChange={(event) => submit(event.currentTarget)} />;
// React refs
let ref = useRef();
<button ref={ref} />;
submit(ref.current);
你可以提交 FormData。
let formData = new FormData();
formData.append("cheese", "gouda");
submit(formData);
或者你可以提交 URLSearchParams。
let searchParams = new URLSearchParams();
searchParams.append("cheese", "gouda");
submit(searchParams);
或者任何 URLSearchParams 建構器接受的值。
submit("cheese=gouda&toasted=yes");
submit([
["cheese", "gouda"],
["toasted", "yes"],
]);
如果你提交 JSON 物件做為 POST 提交，預設行為會將資料編碼成 FormData。
submit(
{ key: "value" },
{
method: "post",
encType: "application/x-www-form-urlencoded",
}
);
// will serialize into request.formData() in your action
// and will show up on useNavigation().formData during the navigation
或者你可以選擇 JSON 編碼。
submit(
{ key: "value" },
{ method: "post", encType: "application/json" }
);
// will serialize into request.json() in your action
// and will show up on useNavigation().json during the navigation
submit('{"key":"value"}', {
method: "post",
encType: "application/json",
});
// will encode into request.json() in your action
// and will show up on useNavigation().json during the navigation
或者純文字。
submit("value", { method: "post", encType: "text/plain" });
// will serialize into request.text() in your action
// and will show up on useNavigation().text during the navigation
第二個參數是一組選項，這些選項（大部分）會直接對應到表單提交屬性。
submit(null, {
method: "post",
action: "/logout",
});
// same as
<Form action="/logout" method="post" />;
useResolvedPath 文件的 Splat 路徑 部分，請參閱適用於 splat 路徑中相對 useSubmit() action 行為的 future.v7_relativeSplatPath 未來標記的行為說明。
由於提交是導覽，因此選項也可以包含其他導覽相關道具，如 <Form> 中的
fetcherKeynavigatepreventScrollResetrelativereplacestateunstable_viewTransitionoptions.unstable_flushSyncunstable_flushSync 選項表示 React Router DOM 會針對此提交的初始狀態更新，呼叫 ReactDOM.flushSync，而非預設的 React.startTransition。此動作可讓你在更新沖刷到 DOM 時立即執行同步 DOM 動作。