Remixドキュメント日本語版

English

<Form>

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

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

Form は、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>
  );
}

Props

action

フォームデータを送信する URL。

undefined の場合、これはコンテキスト内の最も近いルートにデフォルト設定されます。親ルートが <Form> をレンダリングしますが、URL がより深い子ルートと一致する場合、フォームは親ルートに投稿されます。同様に、子ルート内のフォームは子ルートに投稿されます。これは、ネイティブの <form> が常に完全な URL を指すこととは異なります。

スプラットルート内の相対的な `
` の動作に関する `future.v3_relativeSplatPath` の将来のフラグの動作については、`useResolvedPath` ドキュメントの [Splat パス][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}> を指定することで、フォームにナビゲーションをスキップさせ、内部的に fetcher を使用させることができます。これは本質的に useFetcher() + <fetcher.Form> の略で、結果のデータは関係なく、送信を開始し、useFetchers() を介して保留状態にアクセスしたい場合に便利です。

<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 プロパティが省略されている場合、<Form> と <form> は、<form> が現在の URL をデフォルトとして使用し、<Form> がフォームがレンダリングされているルートの URL を使用する一方で、現在の URL に応じて異なるアクションを呼び出すことがあります。

viewTransition

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

メモ

?index

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

<Form action="/accounts?index" method="post" />
action urlroute action
/accounts?indexapp/routes/accounts._index.tsx
/accountsapp/routes/accounts.tsx

こちらも参照してください。

その他のリソース

ビデオ:

関連するディスカッション:

関連する API: