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

从组件调用 SvelteKit 表单操作（或提交表单）

WBOY

发布： 2024-09-05 22:32:41

原创

683 人浏览过

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

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