<Form>一個漸進增強的 HTML <form>，透過 fetch 將資料提交到 action，在 useNavigation 中啟用 pending 狀態，這使得進階使用者介面超越了基本的 HTML 表單。在表單的 action 完成後，頁面上的所有資料都會自動從伺服器重新驗證，以保持 UI 與資料同步。
由於它使用 HTML 表單 API，伺服器呈現的頁面在 JavaScript 載入之前就已具備基本互動性。瀏覽器管理提交和 pending 狀態（例如旋轉的網頁圖示），而不是由 Remix 管理提交。在 JavaScript 載入後，Remix 會接管並啟用 Web 應用程式的使用者體驗。
對於應該同時更改 URL 或在瀏覽器歷史堆疊中加入條目的提交，Form 最為有用。對於不應操縱瀏覽器歷史堆疊的表單，請使用 <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> 不同，後者始終指向完整的 URL。
useResolvedPath 文件中關於 Splat 路徑的部分，了解關於 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() 存取 pending 狀態。
<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 屬性時，根據目前的 URL，<Form> 和 <form> 有時會呼叫不同的 action，因為 <form> 會使用當前 URL 作為預設值，但 <Form> 會使用呈現表單的路由的 URL。
viewTransitionviewTransition 屬性透過將最終狀態更新包裝在 document.startViewTransition() 中，為此導航啟用 View Transition。如果您需要為此視圖轉換套用特定樣式，您還需要利用 useViewTransitionState()。
?index由於 index 路由及其父路由共用相同的 URL，因此會使用 ?index 參數來區分它們。
<Form action="/accounts?index" method="post" />
| action url | 路由 action |
|---|---|
/accounts?index |
app/routes/accounts._index.tsx |
/accounts |
app/routes/accounts.tsx |
另請參閱
影片
相關討論
相關 API
