useSubmit

<Form> 的命令式版本，允许你（程序员）代替用户提交表单。

¥The imperative version of <Form> that lets you, the programmer, submit a form instead of the user.

import { useSubmit } from "@remix-run/react";

function SomeComponent() {
  const submit = useSubmit();
  return (
    <Form
      onChange={(event) => {
        submit(event.currentTarget);
      }}
    />
  );
}

签名

¥Signature

submit(targetOrData, options);

targetOrData

可以是以下任意一种：

¥Can be any of the following:

HTMLFormElement 实例

¥HTMLFormElement instance

<Form
  onSubmit={(event) => {
    submit(event.currentTarget);
  }}
/>

FormData 实例

¥FormData instance

const formData = new FormData();
formData.append("myKey", "myValue");
submit(formData, { method: "post" });

将被序列化为 FormData 的普通对象

¥Plain object that will be serialized as FormData

submit({ myKey: "myValue" }, { method: "post" });

将被序列化为 JSON 的普通对象

¥Plain object that will be serialized as JSON

submit(
  { myKey: "myValue" },
  { method: "post", encType: "application/json" }
);

options

提交的选项，与 <Form> 属性相同。所有选项都是可选的。

¥Options for the submission, the same as <Form> props. All options are optional.

• 操作：要提交到的 href。默认值为当前路由路径。

  ¥action: The href to submit to. Default is the current route path.

• 方法：使用的 HTTP 方法类似于 POST，默认为 GET。

  ¥method: The HTTP method to use like POST, default is GET.

• encType:用于表单提交的编码类型：application/x-www-form-urlencoded、multipart/form-data、application/json 或 text/plain。默认为 application/x-www-form-urlencoded。

  ¥encType: The encoding type to use for the form submission: application/x-www-form-urlencoded, multipart/form-data, application/json, or text/plain. Default is application/x-www-form-urlencoded.

• 导航：指定 false 使用抓取器提交，而不是执行导航

  ¥navigate: Specify false to submit using a fetcher instead of performing a navigation

• fetcherKey:通过 navigate: false 使用 fetcher 提交时使用的 fetcher 键

  ¥fetcherKey: The fetcher key to use when submitting using a fetcher via navigate: false

• preventScrollReset:提交数据时，防止滚动位置重置到窗口顶部。默认为 false。

  ¥preventScrollReset: Prevents the scroll position from being reset to the top of the window when the data is submitted. Default is false.

• 替换：替换历史记录堆栈中的当前条目，而不是推送新条目。默认为 false。

  ¥replace: Replaces the current entry in the history stack, instead of pushing the new entry. Default is false.

• 相对：定义相对路由解析行为。"route"（相对于路由层次结构）或 "path"（相对于 URL）。

  ¥relative: Defines relative route resolution behavior. Either "route" (relative to the route hierarchy) or "path" (relative to the URL).

• flushSync：将此导航的初始状态更新封装在 ReactDOM.flushSync 调用中，而不是默认的 React.startTransition

  ¥flushSync: Wraps the initial state update for this navigation in a ReactDOM.flushSync call instead of the default React.startTransition

• viewTransition：通过将最终状态更新封装在 document.startViewTransition() 中，为本次导航启用 查看 Transition

  ¥viewTransition: Enables a View Transition for this navigation by wrapping the final state update in document.startViewTransition()

  • 如果你需要为此视图转换应用特定样式，你还需要利用 useViewTransitionState()。

    ¥If you need to apply specific styles for this view transition, you will also need to leverage the useViewTransitionState()

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

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

其他资源

¥Additional Resources

讨论

¥Discussion

• 表单 vs. 获取器

  ¥Form vs. Fetcher

相关 API

¥Related API

• <Form>

• fetcher.submit