函数 表单

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

因为它使用了 HTML form API，所以服务器渲染的页面在 JavaScript 加载之前就具有基本交互性。浏览器管理提交以及 pending 状态（例如旋转的 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>
  )
}
Copy