React Router v7 已发布。 查看文档
表单
本页内容

<Form>

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

因为它使用 HTML 表单 API,服务器渲染的页面在 JavaScript 加载之前就具有基本的交互性。浏览器管理提交和待处理状态(如旋转的 favicon),而不是由 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 匹配更深层的子路由,则表单将发布到父路由。同样,子路由内的表单将发布到子路由。这与原生 <form> 不同,原生 <form> 将始终指向完整 URL。

请参阅 useResolvedPath 文档中的 Splat Paths 部分,了解关于 splat 路由中相对 <Form action> 行为的 future.v3_relativeSplatPath 未来标志的说明

method

这确定要使用的 HTTP 动词DELETEGETPATCHPOSTPUT。默认为 GET

<Form method="post" />

原生 <form> 仅支持 GETPOST,因此如果您想支持 渐进增强,则应避免其他动词。

encType

表单提交要使用的编码类型。

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

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

您可以通过指定 <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 prop 时,<Form><form> 有时会调用不同的操作,这取决于当前 URL 是什么,因为 <form> 使用当前 URL 作为默认值,而 <Form> 使用表单渲染所在的路由的 URL。

viewTransition

viewTransition prop 通过将最终状态更新包裹在 document.startViewTransition() 中,为此导航启用 视图过渡。如果需要为此视图过渡应用特定样式,还需要利用 useViewTransitionState()

备注

?index

因为索引路由和它们的父路由共享相同的 URL,所以使用 ?index 参数来区分它们。

<Form action="/accounts?index" method="post" />
操作 URL 路由操作
/accounts?index app/routes/accounts._index.tsx
/accounts app/routes/accounts.tsx

另请参阅

其他资源

视频

相关讨论

相关 API

文档和示例基于 MIT