`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：通过 navigate: false 使用 fetcher 提交时要使用的 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