useSubmit

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 instance

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

选项

提交的选项，与 <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 以使用提取器提交而不是执行导航
• fetcherKey：通过 navigate: false 使用提取器提交时要使用的提取器键
• preventScrollReset：防止在提交数据时将滚动位置重置到窗口顶部。默认为 false。
• replace：替换历史堆栈中的当前条目，而不是推送新条目。默认为 false。
• relative：定义相对路由解析行为。可以是 route（相对于路由层次结构）或 path（相对于 URL）。
• flushSync：将此导航的初始状态更新包装在 ReactDOM.flushSync 调用中，而不是默认的 React.startTransition
• viewTransition：通过将最终状态更新包装在 document.startViewTransition() 中，为该导航启用 View Transition
• 如果需要为此视图转换应用特定样式，您还需要利用 useViewTransitionState()

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

请参阅 useResolvedPath 文档中的 Splat Paths 部分，了解有关 future.v3_relativeSplatPath 未来标志在 splat 路由中相对 useSubmit() 行为的行为的说明

其他资源

讨论

• 表单 vs. 获取器

相关 API

• <Form>
• fetcher.submit