`<Form>`

一个渐进增强的 HTML <form>，通过 fetch 将数据提交到操作，并在 useNavigation 中激活挂起状态，从而实现超越基本 HTML 表单的高级用户界面。表单操作完成后，页面上的所有数据都会自动从服务器重新验证，以保持 UI 与数据同步。

因为它使用了 HTML 表单 API，所以服务器渲染的页面在 JavaScript 加载之前可以在基本级别上进行交互。Remix 不管理提交，而是浏览器管理提交以及挂起状态（如旋转的网站图标）。JavaScript 加载后，Remix 接管并启用 Web 应用程序用户体验。

Form 最适用于也应更改 URL 或以其他方式向浏览器历史记录堆栈添加条目的提交。对于不应操作浏览器历史记录堆栈的表单，请使用 <fetcher.Form>。

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

function NewEvent() {
  return (
    <Form action="/events" method="post">
      <input name="title" type="text" />
      <input name="description" type="text" />
    </Form>
  );
}

属性

`action`

要将表单数据提交到的 URL。

如果为 undefined，则默认为上下文中最近的路由。如果父路由渲染了一个 <Form>，但 URL 匹配更深的子路由，则表单将发布到父路由。同样，子路由内的表单将发布到子路由。这与始终指向完整 URL 的原生 <form> 不同。

请参阅 useResolvedPath 文档中的 Splat 路径部分，了解有关 future.v3_relativeSplatPath 未来标志在 splat 路由内相对 <Form action> 行为的行为的说明。

`method`

这决定了要使用的 HTTP 方法：DELETE、GET、PATCH、POST 和 PUT。默认值为 GET。

<Form method="post" />

原生 <form> 仅支持 GET 和 POST，因此如果您希望支持渐进增强，则应避免使用其他方法。

`encType`

用于表单提交的编码类型。

<Form encType="multipart/form-data" />

默认为 application/x-www-form-urlencoded，对于文件上传，请使用 multipart/form-data。

`navigate`

您可以通过指定 <Form navigate={false}> 来告诉表单跳过导航并在内部使用 fetcher。这实质上是 useFetcher() + <fetcher.Form> 的简写，其中您不关心结果数据，只希望启动提交并通过 useFetchers() 访问挂起状态。

<Form method="post" navigate={false} />

`fetcherKey`

使用非导航 Form 时，您还可以选择指定要使用的 fetcher key。

<Form method="post" navigate={false} fetcherKey="my-key" />

`preventScrollReset`

如果您正在使用 <ScrollRestoration>，则可以通过此选项防止在提交表单时将滚动位置重置到窗口顶部。

<Form preventScrollReset />

`replace`

替换历史记录堆栈中的当前条目，而不是推送新条目。

<Form replace />

`reloadDocument`

如果为 true，它将使用浏览器而不是客户端路由提交表单。与原生 <form> 相同。

<Form reloadDocument />

建议使用此方法而不是 <form>。当省略 action 属性时，<Form> 和 <form> 有时会根据当前 URL 调用不同的操作，因为 <form> 使用当前 URL 作为默认值，而 <Form> 使用渲染表单的路由的 URL。

`viewTransition`

viewTransition 属性通过将最终状态更新包装在 document.startViewTransition() 中，为此导航启用视图转换。如果您需要为此视图转换应用特定的样式，则还需要利用 useViewTransitionState()。

备注

`?index`

因为索引路由及其父路由共享相同的 URL，所以 ?index 参数用于区分它们。

<Form action="/accounts?index" method="post" />

action url	路由 action
`/accounts?index`	`app/routes/accounts._index.tsx`
`/accounts`	`app/routes/accounts.tsx`

另请参阅

?index 查询参数

其他资源

视频

相关讨论

相关 API