`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",
});

有关 future.v3_relativeSplatPath 未来标志对 splat 路由内相对 useSubmit() 行为的影响，请参阅 useResolvedPath 文档中的 Splat 路径部分

其他资源

讨论

表单 vs. Fetcher

相关 API