Remixドキュメント日本語版

English

<Form>

fetch を介してアクションにデータを提出する、漸進的に強化された HTML <form> であり、useNavigation 内の保留状態をアクティブにして、基本的な HTML フォームを超えた高度なユーザーインターフェイスを実現します。フォームのアクションが完了すると、ページ上のすべてのデータはサーバーから自動的に再検証され、UI をデータと同期させます。

HTML フォーム API を使用するため、サーバー側でレンダリングされたページは、JavaScript がロードされる前に基本的なレベルでインタラクティブになります。Remix が提出を管理するのではなく、ブラウザが提出と保留状態（スピニングファビコンなど）を管理します。JavaScript がロードされると、Remix が引き継ぎ、Web アプリケーションのユーザーエクスペリエンスを可能にします。

フォームは、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 がより深い子ルートに一致する場合、フォームは親ルートに投稿されます。同様に、子ルート内のフォームは子ルートに投稿されます。これは、常に完全な URL を指すネイティブな <form> とは異なります。

相対的な `
` の動作に関する `future.v3_relativeSplatPath` 未来フラグの動作については、`useResolvedPath` ドキュメントの [スプラットパス][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 を使用します。

<Form navigate={false}> を指定することで、フォームにナビゲーションをスキップさせて、内部的に フェッチャー を使用するように指示できます。これは、結果のデータに関心がなく、提出を開始して useFetchers() を介して保留状態にアクセスしたい場合の useFetcher() + <fetcher.Form> の省略形です。

<Form method="post" navigate={false} />

fetcherKey

ナビゲーションを行わない Form を使用する場合、オプションで使用する独自のフェッチャー key を指定することもできます。

<Form method="post" navigate={false} fetcherKey="my-key" />

preventScrollReset

<ScrollRestoration> を使用している場合、フォームが提出されたときにスクロール位置がウィンドウの上部にリセットされないようにすることができます。

<Form preventScrollReset />

replace

新しいエントリをプッシュするのではなく、現在のエントリを履歴スタックで置き換えます。

<Form replace />

reloadDocument

true の場合、クライアント側ルーティングではなくブラウザでフォームを提出します。ネイティブな <form> と同じです。

<Form reloadDocument />

これは <form> よりも推奨されます。action プロパティが省略されている場合、<Form> と <form> は、<form> が現在の URL をデフォルトとして使用しますが、<Form> がフォームがレンダリングされているルートの URL を使用するため、現在の URL に応じて異なるアクションを呼び出す場合があります。

unstable_viewTransition

unstable_viewTransition プロパティは、最終的な状態の更新を document.startViewTransition() でラップすることで、このナビゲーションの ビュー遷移 を有効にします。このビュー遷移に特定のスタイルを適用する必要がある場合は、unstable_useViewTransitionState() を活用する必要もあります。

この API は不安定としてマークされており、メジャーリリースなしに破壊的な変更が発生する可能性があることに注意してください。

注意

?index

インデックスルートとその親ルートは同じ URL を共有するため、?index パラメータを使用してそれらを区別します。

<Form action="/accounts?index" method="post" />
action urlルートアクション
/accounts?indexapp/routes/accounts._index.tsx
/accountsapp/routes/accounts.tsx

こちらもご覧ください。

さらなるリソース

動画:

関連する議論:

関連する API: