Latihan 1: Refs dan Directives — SolidJS

Latihan 1 dari materi Refs dan Directives di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah memakai ref ke variabel: let inputRef, onMount(() => inputRef.focus()), dan <input ref={inputRef} placeholder="Auto focus" />. Latihan ini melatih bentuk kedua, callback ref:

Hapus let inputRef dan onMount(() => inputRef.focus()) dari badan App. Impor onMount tetap dipakai.
Ganti ref={inputRef} dengan callback ref yang menunggu halamannya terpasang: ref={(el) => onMount(() => el.focus())}.
Biarkan placeholder="Auto focus".

ref={(el) => el.focus()} saja gak cukup: callback-nya dipanggil sebelum elemennya ada di halaman.

Yang dicek:

Ada <input> di halaman.
Kodemu memuat callback ref: ref={(el) => ...}.
Begitu komponennya tampil, fokus halaman ada di <input> itu, tanpa diklik.

Hint

Callback ref dipanggil saat elemennya baru dibuat, sebelum masuk ke halaman, dan elemen di luar halaman gak bisa memegang fokus.
Di dalam callback ref, daftarkan onMount yang memanggil focus pada elemen yang diterima callback itu.
return <input ref={(el) => onMount(() => el.focus())} placeholder="Auto focus" />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Refs dan Directives — SolidJS

Hint

Memperbarui Aplikasi