コンポーネントから SvelteKit フォーム アクションを呼び出す (またはフォームを送信する)

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 を作成しましょう。

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  export let form;
</script>

<form>
  <input id="test" name="test" />
  <button type="submit"> Submit </button>
</form>

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

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

---

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

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

<!-- routes/+page.svelte -->
<script>
  import FormTestComponent from "$lib/components/FormTestComponent.svelte";
  export let form; // This comes from the page’s server-side form response
</script>

<FormTestComponent {form} />

重要なポイント:

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

---

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

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

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

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  import { enhance } from "$app/forms";
  import FormInput from "$components/forms/FormInput.svelte";
  import { page } from "$app/stores";

  let loading = false;
  export let form;
  $: console.log(form); // Log form response for debugging
</script>

<form
  method="POST"
  on:submit|preventDefault
  action="/test"
  use:enhance
>
  <FormInput label="test" id="test" />
  <button type="submit"> Submit </button>
</form>

重要なポイント:

• 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) のおかげで、フォームの応答とフォームをそれぞれ記録します。

---

結論

これで、サーバー側のフォーム アクションにデータを送信するフォームが SvelteKit コンポーネント内に作成されました。フォームにページ全体を使用する必要はなく、SvelteKit の use:enhance を利用して、ページをリロードすることなく送信をシームレスに処理しました。

カスタム検証を追加したり、エラーを処理したり、ファイルのアップロードなどのより複雑なアクションを実行したりすることで、これを拡張できます。

---

ハッピーハッキング!

以上がコンポーネントから SvelteKit フォーム アクションを呼び出す (またはフォームを送信する)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。