從元件呼叫 SvelteKit 表單操作（或提交表單）-js教程-PHP中文網

從元件呼叫 SvelteKit 表單操作（或提交表單）

WBOY

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

原創

718 人瀏覽過

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

處理來自 SvelteKit 元件的表單提交

從 SvelteKit 元件提交表單以由伺服器端表單操作處理比您想像的要簡單。您不需要將表單放在頁面內。它可以存在於任何元件中，並且仍然與 SvelteKit 的伺服器端功能互動。

這篇文章將引導您完成從元件提交表單、使用 +page.server.js 中的預設表單操作處理表單，以及設定 +page.svelte 來綁定表單。

專案結構
我的-sveltekit-專案/
├── 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 進行表單綁定

現在，建立一個 +page.svelte 檔案來使用 FormTestComponent 並綁定其 form 屬性。

<!-- 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. 建立伺服器端操作

要在伺服器上處理表單，請在 /test 處使用 +page.server.js（如果您喜歡 TypeScript，則使用 +page.server.ts）建立目錄。

以下是 +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!!"
        };
    }
};

登入後複製