<Form>

<Form> 组件扩展了 HTML <form> 元素以提供 提交时进行**客户端导航**，以及**渐进增强**。

对于更新 URL 搜索参数的表单很有用，因为它减少了实现上述目标所需的样板代码。

基本用法

import Form from 'next/form'
 
export default function Page() {
  return (
    <Form action="/search">
      {/* On submission, the input value will be appended to 
          the URL, e.g. /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

参考

<Form> 组件的行为取决于是否将 action 属性传递给 string 或 function。

• 当 action 为**字符串**时，<Form> 的行为类似于使用**GET** 方法的原生 HTML 表单。表单数据被编码为 URL 中的搜索参数，并且当表单提交时，它会导航到指定的 URL。此外，Next.js
  • 在表单提交时执行客户端导航 而不是完整的页面重新加载。这保留了共享的 UI 和客户端状态。

action (字符串) 属性

当 action 为字符串时，<Form> 组件支持以下属性

• action: 提交表单时要导航到的 URL 或路径。
  • 空字符串 "" 将使用更新的搜索参数导航到同一路由。
• replace: 替换当前历史状态，而不是将新状态推送到浏览器的历史记录堆栈。默认为 false。
• scroll: 控制导航期间的滚动行为。默认为 true，这意味着它将滚动到新路由的顶部，并在前后导航中保持滚动位置。

注意事项

• onSubmit: 可用于处理表单提交逻辑。但是，调用 event.preventDefault() 将覆盖 <Form> 的行为，例如导航到指定的 URL。
• method, encType, target: 不受支持，因为它们会覆盖 <Form> 的行为。
  • 类似地，formMethod、formEncType 和 formTarget 可分别用于覆盖 method、encType 和 target 属性，并且使用它们将回退到本机浏览器行为。
  • 如果您需要使用这些属性，请改用 HTML <form> 元素。
• <input type="file">: 当 action 为字符串时使用此输入类型将匹配浏览器行为，方法是提交文件名而不是文件对象。