Form
本页内容

Form

概述

参考文档 ↗

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

由于使用了 HTML 表单 API,服务器渲染的页面在 JavaScript 加载之前就具有基本的交互性。浏览器管理提交以及待处理状态(如旋转的 favicon),而不是由 React Router 管理。JavaScript 加载后,React Router 接管控制,实现 Web 应用的用户体验。

Form 最适用于那些也应更改 URL 或在浏览器历史记录堆栈中添加条目的提交。对于不应操作浏览器历史记录堆栈的表单,请使用 [<fetcher.Form>][fetcher_form]。

import { Form } from "react-router";

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

Props

action

提交表单数据的 URL。如果为 undefined,则默认为上下文中最近的路由。

discover

确定应用 manifest 的发现行为。

encType

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

fetcherKey

当使用 navigate={false} 时,指定要使用的特定 fetcherKey,以便你可以在 useFetcher 中在不同的组件中获取 fetcher 的状态。

method

表单提交时使用的 HTTP 动词。支持 "get"、"post"、"put"、"delete" 和 "patch"。

原生 <form> 仅支持 getpost,如果你想支持渐进增强,请避免使用其他动词。

当为 false 时,跳过导航并在内部使用 useFetcher。这实际上是 useFetcher() + <fetcher.Form> 的一个简写形式,当你不需要在该组件中关心结果数据时使用。

onSubmit

表单提交时调用的函数。如果你调用 event.preventDefault(),则此表单将不做任何事情。

preventScrollReset

当使用以下组件时,防止导航完成后滚动位置重置到视口顶部组件

relative

确定表单 action 是相对于路由层级还是 pathname。如果你想退出路由层级导航,而是想基于 /-分隔的 URL 片段进行路由,请使用此选项。

reloadDocument

强制进行完整的文档导航,而不是客户端路由 + 数据获取。

replace

当表单导航时,替换浏览器历史堆栈中的当前条目。如果你不希望用户能够通过点击“后退”按钮返回到包含该表单的页面,请使用此选项。

state

要添加到此导航的历史堆栈条目中的状态对象

viewTransition

为此导航启用视图转换(View Transition)。要在转换期间应用特定样式,请参阅useViewTransitionState

文档和示例 CC 4.0