Event handler adalah function yang dijalankan React waktu sesuatu terjadi di halaman: tombol diklik, kolom diketik, form dikirim. Kamu gak menjalankannya sendiri, kamu cuma menitipkannya ke elemen. Bayangin titip pesan ke satpam: "Kalau paket datang, tolong telepon aku." Kamu menitipkan instruksinya, dan satpam yang menjalankannya nanti, waktu paketnya datang. Kalau kamu malah langsung menelepon saat itu juga, yang dititipkan ke satpam cuma hasilnya, kosong, dan waktu paket datang gak ada yang terjadi.
🧪 Tebakan cepat:
handleClickisinyaconsole.log("Halo!"), dan tombolnya ditulis<button onClick={handleClick()}>, pakai(). Kapan "Halo!" tercetak: tiap klik, sekali waktu komponennya digambar, atau gak pernah? Tebak dulu, jawabannya ada di bagian "Kirim function-nya, jangan dipanggil".
Pasang handler dengan onClick
function App() {
const handleClick = () => {
console.log("Halo!");
};
return (
<button id="greet" onClick={handleClick}>
Sapa
</button>
);
}
handleClickadalah function biasa. Namahandle...cuma kebiasaan supaya gampang dikenali.onClick={handleClick}menitipkan function itu ke tombol. React memanggilnya tiap kali tombolnya diklik.- Nama event di React ditulis camelCase:
onClick,onChange,onSubmit, bukanonclickseperti di HTML. Nilainya function di dalam{ }, bukan teks kode di dalam tanda kutip.
Klik tombol Sapa 2 kali, console berisi 2 baris Halo!.
Kirim function-nya, jangan dipanggil
Bedanya cuma (), tapi artinya jauh beda:
| Ditulis | Yang diterima onClick |
Kapan handleClick jalan |
|---|---|---|
onClick={handleClick} |
function handleClick |
tiap tombol diklik |
onClick={handleClick()} |
hasil panggilannya: undefined |
waktu komponen digambar, bukan waktu diklik |
Dengan (), handleClick langsung dijalankan saat React menggambar komponen. "Halo!" tercetak sekali di setiap render, dan onClick cuma menerima undefined, jadi klik gak melakukan apa-apa. Itu jawaban tebakannya. Lebih parah lagi kalau handler-nya mengubah data yang bikin komponen digambar ulang (nanti kamu kenal sebagai state): gambar, panggil, ubah, gambar lagi, terus berulang, sampai React berhenti dengan error Too many re-renders.
Kirim argumen: bungkus dengan arrow function
Kadang handler butuh data, misalnya id barang yang mau dihapus. onClick={handleDelete(id)} salah, karena memanggil langsung. Bungkus dengan arrow function:
<button onClick={() => handleDelete(id)}>Hapus</button>
() => handleDelete(id) adalah function baru yang belum dijalankan. React menyimpannya, dan baru waktu diklik, function itu memanggil handleDelete(id).
Object event dan e.target.value
React memanggil handler dengan satu argumen: object event, biasanya dinamai e. Isinya keterangan tentang kejadian itu:
e.target: elemen yang memicu event.e.target.value: isi kolom input saat itu.
function App() {
const [text, setText] = useState("");
return (
<div>
<input id="nama" onChange={(e) => setText(e.target.value)} />
<p id="output">{text}</p>
</div>
);
}
useState("")menyiapkan tempat menyimpan nilai yang bikin tampilan ikut berubah:textadalah nilainya (awalnya kosong), dansetText(nilaiBaru)menggantinya, lalu React menggambar ulang komponen dengan nilai baru. Penjelasan lengkapnya ada di pelajaran useState.onChangedi React jalan di setiap ketikan, bukan cuma waktu kolomnya ditinggalkan seperti eventchangedi HTML biasa.- Ketik
B,u,d,i: handler jalan 4 kali, dan<p id="output">berturut-turut berisiB,Bu,Bud,Budi.
e.preventDefault(): batalkan aksi bawaan browser
Beberapa elemen punya aksi bawaan. Form yang dikirim membuat browser memuat ulang halaman (atau pindah ke halaman lain), dan link membawa ke alamat baru. Begitu halaman dimuat ulang, semua yang ada di halaman ikut hilang. e.preventDefault() membatalkan aksi bawaan itu, jadi kamu yang menentukan apa yang terjadi:
function FormSapa() {
const handleSubmit = (e) => {
e.preventDefault();
console.log("Form dikirim!");
};
return (
<form onSubmit={handleSubmit}>
<input name="nama" />
<button>Kirim</button>
</form>
);
}
onSubmit dipasang di <form>, bukan di tombolnya, supaya jalan juga waktu orang menekan Enter di kolom isian.
⚠️ Jebakan yang sering ketemu
onClick={handleClick()}. Function-nya jalan waktu digambar, bukan waktu diklik. Buang(), atau bungkus dengan() => ...kalau perlu argumen.onclickhuruf kecil. React gak mengenalinya. TulisonClick.- Lupa parameter
e.const handleChange = () => setText(e.target.value)error karenaegak ada. Tulis(e) => .... - Lupa
e.preventDefault()dionSubmit. Halaman dimuat ulang dan semuanya hilang, termasuk log di console.
TL;DR: Event handler adalah function yang dititipkan ke elemen lewat prop camelCase (onClick, onChange, onSubmit), lalu dijalankan React waktu event-nya terjadi. Kirim function-nya, jangan dipanggil: onClick={handleClick}, bukan onClick={handleClick()}, yang jalan waktu render dan bikin klik gak berbuat apa-apa. Perlu argumen? onClick={() => handleDelete(id)}. Handler menerima object event e: e.target.value untuk isi input (di React onChange jalan tiap ketikan), dan e.preventDefault() untuk membatalkan aksi bawaan seperti reload waktu form dikirim.
