Pertukaran, Pola Ref, Nilai Bawaan
Bandingkan input terkontrol dan tak terkontrol, gunakan ref untuk pembacaan, serta sediakan nilai bawaan yang masuk akal.
Pertukaran, Pola Ref, Nilai Bawaan adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 2. 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 2 pelajaran total.
Terkontrol vs tidak terkontrol
Tujuan: Pilih gaya masukan yang tepat.
- Terkontrol: nilai disimpan dalam status; dirender ulang setiap kali terjadi perubahan
- Tidak terkontrol: DOM menyimpan nilai; baca melalui referensi saat diperlukan
- Nilai bawaan: defaultValue, defaultChecked
Perbandingan sekilas
- Terkontrol: sangat cocok untuk validasi langsung, pemformatan otomatis, dan sinkronisasi bidang lain
- Tidak terkontrol: lebih sedikit perenderan; cocok untuk formulir sederhana yang hanya dikirim
- Gabungkan: gunakan terkontrol untuk bidang utama dan tidak terkontrol untuk bidang opsional
Demo: masukan terkontrol
Bidang terkontrol menyimpan nilai dalam status dan memperbaruinya setiap kali terjadi perubahan.
<div id="root"></div>
Demo: tidak terkontrol dengan referensi
Bidang tidak terkontrol menggunakan nilai DOM; kita membacanya melalui referensi saat diperlukan.
<div id="root"></div>
Nilai bawaan dan kapan harus menggunakan kontrol
Gunakan defaultValue/defaultChecked untuk nilai bawaan bidang tidak terkontrol; beralihlah ke bidang terkontrol saat Anda memerlukan aturan langsung.
<div id="root"></div>
Kiat dan jebakan
- Jangan mencampur value dan defaultValue pada masukan yang sama
- Gunakan referensi untuk membaca nilai masukan tidak terkontrol
- Pilih masukan terkontrol saat antarmuka pengguna bereaksi terhadap setiap pengetikan
Pemeriksaan terkontrol vs tidak terkontrol
Ringkasan
Ringkasan: Gunakan masukan terkontrol untuk aturan langsung dan status turunan; gunakan masukan tidak terkontrol untuk pembacaan sederhana yang hanya dilakukan saat pengiriman. Gunakan referensi untuk membaca nilai dan defaultValue untuk konten awal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pertukaran, Pola Ref, Nilai Bawaan” gratis?
Ya — teks lengkap “Pertukaran, Pola Ref, Nilai Bawaan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 2 pelajaran total.
Apa yang akan aku pelajari di “Pertukaran, Pola Ref, Nilai Bawaan”?
Bandingkan input terkontrol dan tak terkontrol, gunakan ref untuk pembacaan, serta sediakan nilai bawaan yang masuk akal. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 1 dari 2.
Berapa lama pelajaran “Pertukaran, Pola Ref, Nilai Bawaan” 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 React Academy ini?
Ya. Setiap pelajaran React 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
- Pertukaran, Pola Ref, Nilai Bawaan
- Pengambil Prop & Reducer State (Ringan)