Mengelola Fokus dengan Ref dan useEffect
Kendalikan fokus dalam lingkungan berbasis komponen.
Mengelola Fokus dengan Ref dan useEffect adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Mengapa focus Perlu Dikelola
Saat antarmuka muncul, menghilang, atau diperbarui, focus papan ketik dapat berpindah ke tempat yang salah atau menghilang. Dalam React, Anda mengarahkannya secara sengaja dengan ref dan efek.
ref Menunjuk ke Node DOM
useRef memberi Anda pegangan yang stabil ke elemen nyata. Setelah perenderan, ref.current adalah node DOM sebenarnya yang dapat dipanggil dengan .focus().
const inputRef = useRef(null);
<input ref={inputRef} />useEffect Berjalan Setelah Perenderan
Focus harus dilakukan setelah elemen ada di DOM. useEffect berjalan setelah peramban menggambar tampilan, sehingga ini merupakan tempat yang aman untuk memindahkan focus.
useEffect(() => {
inputRef.current.focus();
}, []);Atur focus Saat Pemasangan
Array dependensi kosong berarti efek berjalan sekali saat komponen dipasang. Gunakan ini untuk menempatkan focus pada bidang pertama dalam formulir atau langkah.
Atur focus Saat Sesuatu Dibuka
Tambahkan dependensi seperti isOpen agar efek berjalan kembali saat status berubah. Ketika panel terbuka, Anda dapat memindahkan focus langsung ke dalamnya.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Lindungi dari Nilai Null
ref dapat bernilai null jika node belum dirender. Periksa apakah ref.current ada sebelum memanggil .focus() agar elemen yang tidak ada tidak menyebabkan kerusakan.
ref.current?.focus();Buat Elemen Non-Input Dapat Menerima focus
Judul dan div tidak dapat menerima focus secara bawaan. Tambahkan tabindex -1 agar skrip dapat memberikan focus tanpa menambahkannya ke urutan tab alami.
<div tabindex="-1" ref={regionRef}>...</div>Pulihkan focus Saat Pembersihan
Efek dapat mengembalikan fungsi pembersihan. Gunakan fungsi tersebut untuk mengirim focus kembali ke pemicu saat suatu lapisan dilepas, sehingga pengguna tidak tiba-tiba berada di bagian atas halaman.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Waspadai Closure yang Kedaluwarsa
Efek menangkap nilai dari perenderannya. Jika Anda mengatur focus berdasarkan data, cantumkan data tersebut dalam array dependensi agar efek menggunakan nilai terbaru, bukan nilai lama.
forwardRef untuk Elemen Anak
Untuk mengatur focus pada elemen di dalam komponen anak, bungkus elemen tersebut dengan forwardRef. Komponen induk kemudian menyimpan ref ke node bagian dalam dan dapat memberikan focus padanya.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Jangan Terlalu Sering Mengatur focus
Pindahkan focus hanya jika benar-benar membantu pengguna, misalnya saat membuka dialog atau menampilkan kesalahan. Merebut focus pada setiap perenderan membuat semua orang frustrasi.
Pemeriksaan Singkat
Anda ingin memindahkan focus papan ketik ke sebuah elemen tepat setelah React merendernya. Di mana hal itu harus dilakukan?
Rangkuman: ref Ditambah Efek
Pasangkan useRef dengan useEffect untuk memindahkan focus setelah perenderan. Lindungi dari nilai null, pulihkan focus saat pembersihan, dan arahkan focus hanya jika hal itu membantu. 🎯
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengelola Fokus dengan Ref dan useEffect” gratis?
Ya — teks lengkap “Mengelola Fokus dengan Ref dan useEffect” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengelola Fokus dengan Ref dan useEffect”?
Kendalikan fokus dalam lingkungan berbasis komponen. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Mengelola Fokus dengan Ref dan useEffect” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Perubahan Rute Tanpa Memuat Ulang Halaman
- Mengelola Fokus dengan Ref dan useEffect
- Fragmen, Portal, dan Perangkap Urutan DOM
- jsx-a11y dan Pengaman Tingkat Komponen