<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 动词: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
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