从组件调用 SvelteKit 表单操作（或提交表单）-js教程-PHP中文网

Calling a SvelteKit form action (or submitting a form) from a component

SvelteKit コンポーネントからのフォーム送信の処理

サーバー側のフォームアクションで処理されるように SvelteKit コンポーネントからフォームを送信することは、思っているよりも簡単です。フォームをページ内に含める必要はありません。任意のコンポーネント内に存在し、SvelteKit のサーバー側機能と対話できます。

この投稿では、コンポーネントからフォームを送信し、+page.server.js のデフォルトのフォームアクションを使用してフォームを処理し、フォームをバインドする +page.svelte を設定する方法について説明します。

プロジェクトの構造
my-sveltekit-project/
§── src/
│ §── コンポーネント/
│ │ └─ FormTestComponent.svelte
│ §── ルート/
│ │ §── +page.svelte
│ │ └─ テスト/
│ │ └─ +page.server.js
§── 静的/
§── package.json
§── svelte.config.js
§── vite.config.js
└── tsconfig.json

1. FormTestComponent を作成し、フォームを追加します

まず、単純なフォームを含む FormTestComponent を作成しましょう。

登录后复制

FormInput コンポーネントは、ここでフォームに使用されるカスタム入力フィールドです。
{form} は form={form} の短縮形で、ページからこのコンポーネントに渡されたフォームオブジェクトをバインドします。

この時点で、コンポーネント内で使用できる基本的なフォームが完成しましたが、まだサーバー側のフォーム処理に接続されていません。

2. フォームバインド用に +page.svelte を設定する

次に、FormTestComponent を使用する +page.svelte ファイルを作成し、そのフォームプロップをバインドします。

登录后复制

重要なポイント:

export let form;: フォームオブジェクトはサーバー上のフォームアクションの応答から取得され、FormTestComponent に渡されます。これにより、フォーム応答データがコンポーネント内のフォームプロパティにバインドされます。
反応性: フォームがサーバー上で送信および更新されると、フォームオブジェクトはこれらの変更をクライアント側に反映し、すべての同期を保ちます。

3. FormTestComponent でのフォーム送信の強化

フォームの送信を効率的に処理するために、SvelteKit は use:enhance ディレクティブを提供します。これにより、ページ全体をリロードせずに送信を処理するなど、段階的な拡張機能を使用してフォームを拡張できます。

FormTestComponent でフォーム送信を強化する方法は次のとおりです。

登录后复制

重要なポイント:

use:enhance: このディレクティブは、完全なリロードを行わずに送信を処理できるようにフォームを強化します。また、クライアント側でのエラーや部分的なフォーム更新の処理も簡単になります。
on:submit|preventDefault: これにより、ブラウザのデフォルトのフォーム送信動作 (ページのリロード) が防止され、SvelteKit がそれを処理できるようになります。
action="/test": フォームは、すぐに作成する /test ルートを指します。名前付きアクション (サインアップなど) を使用している場合、URL は /test?/signup.

4. サーバー側アクションの作成

サーバー上でフォームを処理するには、+page.server.js (TypeScript を使用する場合は +page.server.ts) を使用して /test にディレクトリを作成します。

+page.server.js でのフォームアクションの例を次に示します。

// - /routes/test/+page.server.js /** @type {import('./$types').Actions} */ export const actions = { default: async ({ request }) => { const data = await request.formData(); const formEntries = Object.fromEntries(data.entries()); // Convert form data to an object console.log(formEntries); // Log form data on the server return { success: true, message: "Yay!!" }; } };

登录后复制

重要なポイント:

request.formData(): このメソッドは、リクエストから送信されたフォームデータを取得します。
Object.fromEntries(data.entries()): これにより、フォームデータがより使いやすいオブジェクト形式に変換されます。各フォームフィールド名がキーとなり、その値が対応する値になります。

これはサーバーがフォームを処理する場所です。この場合、フォームデータをログに記録し、成功メッセージを返します。実際のシナリオでは、検証を実行してエラーを処理することになるでしょう。

5. フォームの応答を確認する

フォームが送信されると、ターミナル (サーバー側) とブラウザーのコンソール (クライアント側) の両方に記録されたフォームデータが表示されます。これは、コンポーネントの console.log(form) と +page.server.js の console.log(formEntries) のおかげで、フォームの応答とフォームをそれぞれ記録します。