Event Handling: Merespons Aksi Pengguna

Event di React

Pengguna berinteraksi lewat klik, mengetik, mengirim form. Di React, kamu memasang event handler langsung di JSX dengan atribut camelCase:

<button onClick={handleKlik}>Klik</button>
<input onChange={handleUbah} />
<form onSubmit={handleKirim}>...</form>

Menulis handler

function Tombol() {
  function handleKlik() {
    alert("Diklik!");
  }
  return <button onClick={handleKlik}>Klik saya</button>;
}

Atau langsung inline dengan arrow function:

<button onClick={() => alert("Diklik!")}>Klik</button>

Kesalahan paling umum: memanggil, bukan meneruskan

<button onClick={handleKlik()}>   // ❌ dipanggil saat render!
<button onClick={handleKlik}>     // ✅ diteruskan sebagai referensi
<button onClick={() => handleKlik(5)}>  // ✅ jika butuh argumen

Event object

Handler menerima event object (synthetic event) berisi informasi:

function Pencarian() {
  function handleUbah(e) {
    console.log(e.target.value);   // isi input saat ini
  }
  return <input onChange={handleUbah} />;
}

• e.target — elemen yang memicu event.
• e.preventDefault() — membatalkan perilaku bawaan (misalnya submit form yang memuat ulang halaman).
• e.stopPropagation() — menghentikan event naik ke elemen induk.

Event handler sebagai props (anak → induk)

Anak tidak bisa mengubah data induk langsung. Induk mengirim function lewat props, anak memanggilnya:

function Pencarian({ onCari }) {
  return <input onChange={(e) => onCari(e.target.value)} />;
}

function App() {
  return <Pencarian onCari={(kata) => console.log(kata)} />;
}

Konvensi nama: props handler diawali on (onCari, onHapus), function di dalam komponen diawali handle (handleKlik).

Daftar event yang sering dipakai

Event di React tidak sama persis dengan DOM

React membungkusnya agar konsisten di semua browser dan memasang listener secara efisien di root. Untuk pembelajaran, cukup ingat: tulis onClick, bukan onclick.