表单

逐步增强的 HTML <form> 通过 fetch 向操作提交数据，激活 useNavigation 中的待处理状态，从而启用超越基本 HTML 表单的高级用户界面。表单操作完成后，页面上的所有数据都会自动从服务器重新验证，以使 UI 与数据保持同步。

由于它使用 HTML 表单 API，因此在 JavaScript 加载之前，服务器呈现的页面在基本级别上是可交互的。浏览器管理提交以及待处理状态（如旋转的图标），而不是 Remix 管理提交。JavaScript 加载后，Remix 接管以启用 Web 应用程序用户体验。

表单对于还应更改 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>
  );
}

Props

`action`

提交表单数据的 URL。

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

请参阅 useResolvedPath 文档中的 Splat Paths 部分，了解有关 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 navigation={false}> 来告诉表单跳过导航并在内部使用 fetcher。这实际上是 useFetcher() + <fetcher.Form> 的简写，您不关心结果数据，只想启动提交并通过 useFetchers() 访问待处理状态。

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

`fetcherKey`

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

<Form method="post" navigation={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() 中来为此导航启用 View Transition。如果您需要为此视图转换应用特定样式，您还需要利用 useViewTransitionState()。

注释

`?index`

由于索引路由和其父路由共享相同的 URL，因此使用 ?index 参数来区分它们。

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

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

参见：

?index 查询参数

其他资源

视频：

相关讨论：

相关API：