Latihan 1: useRef — React

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

Bikin kolom isian yang bisa difokuskan lewat tombol. Tulis semuanya di dalam App, di dalam <div> dari kode awal.

Buat ref dengan nilai awal null: const inputRef = useRef(null).
Render <input id="nama" /> dan hubungkan ke ref lewat atribut ref={inputRef}.
Render <button id="focus">Focus</button> dengan onClick yang memanggil inputRef.current.focus().

Yang dicek: #nama ada, kodenya memakai useRef(, onClick, dan .current, #nama belum fokus sebelum ada yang diklik, dan sesudah #focus diklik, #nama yang memegang fokus. useRef sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.

Hint

Fokus itu urusan elemen DOM yang asli, bukan state. Kamu butuh pegangan ke elemen input itu, dan pegangan itu dibuat dengan useRef.
Buat const inputRef = useRef(null), pasang ref={inputRef} di input, lalu di onClick tombol panggil method fokus milik elemen yang ada di inputRef.current.
<input id="nama" ref={inputRef} /> lalu <button id="focus" onClick={() => inputRef.current.focus()}>Focus</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: useRef — React

Hint

Memperbarui Aplikasi