Penanganan event: onClick & onChange
Tangani masukan pengguna dengan onClick dan onChange; pahami event sintetis React dan baca nilainya dengan aman.
Penanganan event: onClick & onChange adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 3 pelajaran total.
Peristiwa di React
Tujuan: Tangani klik dan perubahan teks menggunakan peristiwa sintetis React agar perilakunya konsisten di berbagai peramban.
- onClick memicu tindakan
- onChange membaca nilai masukan
- Objek peristiwa membawa detail
Dasar-dasar onClick
Pasang sebuah penangan: onClick={handle}. Buat fungsi tetap singkat; perbarui status dengan fungsi pengubah (utamakan pembaruan fungsional jika menggunakan nilai sebelumnya).
Dasar-dasar onChange
onChange berjalan ketika pengguna mengedit masukan. Baca teks dari event.target.value dan jadikan status sebagai satu-satunya sumber kebenaran.
Contoh: klik & masukan
Contoh: tambah nilai saat diklik, cerminkan masukan dengan onChange, dan cegah pemuatan ulang saat formulir dikirim menggunakan event.preventDefault().
<div id="root"></div>
Peristiwa sintetis dalam praktik
Peristiwa sintetis membungkus peristiwa bawaan agar konsisten. Baca nilai di dalam penangan; buat penangan tetap singkat dan terfokus.
- Gunakan event.preventDefault() untuk formulir
- Gunakan event.target.value untuk masukan
Kiat & kendala
Kiat:
- Jangan mengubah DOM secara langsung; biarkan status mengendalikan antarmuka.
- Hindari logika berat secara langsung di dalam penangan—panggil fungsi-fungsi kecil.
- Gunakan pembaruan fungsional saat memakai status sebelumnya.
Membaca nilai masukan
Ringkasan
Ringkasan: Gunakan onClick untuk tindakan dan onChange untuk masukan; baca nilai dari event.target.value; cegah pemuatan ulang formulir bawaan jika diperlukan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penanganan event: onClick & onChange” gratis?
Ya — teks lengkap “Penanganan event: onClick & onChange” 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 3 pelajaran total.
Apa yang akan aku pelajari di “Penanganan event: onClick & onChange”?
Tangani masukan pengguna dengan onClick dan onChange; pahami event sintetis React dan baca nilainya dengan aman. 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 2 dari 3.
Berapa lama pelajaran “Penanganan event: onClick & onChange” 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
- Dasar useState & pembaruan yang benar
- Penanganan event: onClick & onChange
- Masukan terkontrol vs tidak terkontrol (pengantar)