Latihan 1: Component Events — Svelte

Latihan 1 dari materi Component Events di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya <script> berisi komentar TODO, dan <button>Klik saya</button>. Biarkan tombol dan tulisannya.

Di <script>, impor pengirim event dari Svelte: import { createEventDispatcher } from "svelte".
Masih di <script>, buat pengirimnya sekali: const dispatch = createEventDispatcher().
Di tombolnya, kirim event bernama persis klik saat diklik: <button on:click={() => dispatch("klik", { pesan: "Halo!" })}>. Detail { pesan: "Halo!" } diminta kode awal, tapi gak dinilai.

Yang dicek:

Halaman punya <button>.
Kodemu menyebut createEventDispatcher dan dispatch. Tulisan di dalam komentar gak dihitung.
Kodemu memakai on:click.
Penguji mendengarkan event klik dari luar komponen, seperti induk dengan on:klik, lalu menekan tombolnya. Event klik harus benar-benar sampai.

Hint

Anak gak memanggil function induknya. Dia membuat pengirim event sekali di script, lalu mengumumkan event bernama klik saat tombolnya ditekan.
Impor createEventDispatcher dari svelte, simpan hasil panggilannya di const dispatch, lalu panggil dispatch dengan nama event klik di on:click tombolnya.
import { createEventDispatcher } from "svelte" const dispatch = createEventDispatcher() lalu <button on:click={() => dispatch("klik", { pesan: "Halo!" })}>Klik saya</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Component Events — Svelte

Hint

Memperbarui Aplikasi