Memanggil tindakan borang SvelteKit (atau menyerahkan borang) daripada komponen

Mengendalikan Penyerahan Borang daripada Komponen SvelteKit

Menyerahkan borang daripada komponen SvelteKit untuk dikendalikan oleh tindakan borang sebelah pelayan adalah lebih mudah daripada yang anda fikirkan. Anda tidak memerlukan borang untuk berada di dalam halaman. Ia boleh hidup dalam mana-mana komponen dan masih berinteraksi dengan fungsi bahagian pelayan SvelteKit.

Siaran ini akan memandu anda menghantar borang daripada komponen, memprosesnya menggunakan tindakan borang lalai daripada +page.server.js dan menyediakan +page.svelte untuk mengikat borang.

Struktur Projek
my-sveltekit-project/
├── src/
│ ├── komponen/
│ │ └── FormTestComponent.svelte
│ ├── laluan/
│ │ ├── +page.svelte
│ │ └── ujian/
│ │ └── +page.server.js
├── statik/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

1. Buat FormTestComponent dan Tambah Borang

Mula-mula, mari buat FormTestComponent yang mengandungi borang mudah:

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

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

• Komponen FormInput ialah medan input tersuai yang digunakan di sini untuk borang.
• {form} ialah singkatan untuk form={form}, yang mengikat objek borang yang dihantar dari halaman ke komponen ini.

Pada ketika ini, kami mempunyai borang asas yang sedia untuk digunakan dalam komponen, tetapi kami masih belum menyambungkannya kepada pengendalian borang sebelah pelayan.

2. Sediakan +page.svelte untuk Pengikatan Borang

Sekarang, buat fail +page.svelte untuk menggunakan FormTestComponent dan ikat prop bentuknya.

<!-- 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} />

Perkara Utama:

• export let form;: Objek borang datang daripada respons tindakan borang pada pelayan dan diturunkan kepada FormTestComponent. Ini mengikat data respons borang kepada prop borang dalam komponen.
• Kereaktifan: Apabila borang diserahkan dan dikemas kini pada pelayan, objek borang akan mencerminkan perubahan ini di sisi klien, memastikan segala-galanya segerak.

3. Meningkatkan Penyerahan Borang dalam FormTestComponent

Untuk mengendalikan penyerahan borang dengan cekap, SvelteKit menyediakan arahan use:enhance, yang membolehkan anda mempertingkatkan borang dengan ciri peningkatan progresif seperti mengendalikan penyerahan tanpa muat semula halaman penuh.

Begini cara anda mempertingkatkan penyerahan borang dalam 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>

Perkara Utama:

• use:enhance: Arahan ini mempertingkatkan borang untuk mengendalikan penyerahan tanpa muat semula penuh. Ia juga memudahkan untuk mengendalikan ralat atau kemas kini separa borang di pihak pelanggan.
• on:submit|preventDefault: Ini menghalang kelakuan penyerahan borang lalai penyemak imbas (muat semula halaman), membenarkan SvelteKit mengendalikannya.
• action="/test": Borang menghala ke laluan /test, yang akan kami buat tidak lama lagi. Jika kami menggunakan tindakan bernama (seperti pendaftaran), URL akan kelihatan seperti /test?/signup.

4. Mencipta Tindakan Bahagian Pelayan

Untuk memproses borang pada pelayan, buat direktori di /test dengan +page.server.js (atau +page.server.ts jika anda lebih suka TypeScript).

Berikut ialah contoh rupa tindakan borang dalam +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!!"
        };
    }
};

Perkara Utama:

• request.formData(): Kaedah ini mendapatkan semula data borang yang diserahkan daripada permintaan.
• Object.fromEntries(data.entry()): Ini menukar data borang kepada format objek yang lebih boleh digunakan, dengan setiap nama medan borang menjadi kunci dan nilainya ialah nilai yang sepadan.

Di sinilah pelayan memproses borang. Dalam kes ini, kami mengelog data borang dan mengembalikan mesej kejayaan. Dalam senario dunia sebenar, anda mungkin akan melakukan pengesahan dan mengendalikan sebarang ralat.

5. Melihat Respons Borang

Setelah borang diserahkan, anda akan melihat data borang dilog dalam kedua-dua terminal (sebelah pelayan) dan dalam konsol penyemak imbas (sebelah pelanggan). Ini adalah terima kasih kepada console.log(form) dalam komponen dan console.log(formEntries) dalam +page.server.js, yang masing-masing mencatatkan respons borang dan borang.

Kesimpulan

Kini anda telah berjaya mencipta borang dalam komponen SvelteKit yang menyerahkan data kepada tindakan borang sebelah pelayan. Anda tidak perlu menggunakan halaman penuh untuk borang tersebut dan anda telah menggunakan use:enhance SvelteKit untuk mengendalikan penyerahan dengan lancar tanpa muat semula halaman.

Anda boleh melanjutkan ini dengan menambahkan pengesahan tersuai, mengendalikan ralat atau bahkan melakukan tindakan yang lebih kompleks seperti muat naik fail.

Selamat Menggoda!

Atas ialah kandungan terperinci Memanggil tindakan borang SvelteKit (atau menyerahkan borang) daripada komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!