Menanggapi event

Penangan event adalah fungsi yang dijalankan React ketika pengguna berinteraksi, misalnya mengeklik tombol. Fungsi itu dikirim sebagai prop onClick: <button onClick={tanganiKlik}>. Konvensi React menamai penangan dengan handle diikuti nama event-nya, seperti handleClick; di kelas ini dipakai padanannya, tangani.

Fungsinya diserahkan, bukan dipanggil. onClick={tanganiKlik} menyerahkan fungsi kepada React untuk dipanggil saat klik terjadi. onClick={tanganiKlik()} memanggilnya saat render, sebelum ada klik, lalu menyerahkan nilai kembaliannya. Bila penangan membutuhkan argumen, bungkus dengan fungsi panah: onClick={() => pesan("Bakso")}.

function TombolMenu({ menu, onPesan }) {
  return <button onClick={() => onPesan(menu)}>{menu}</button>;
}

export default function Menu() {
  function tanganiPesan(menu) {
    console.log("Dipesan: " + menu);
  }
  return <TombolMenu menu="Bakso" onPesan={tanganiPesan} />;
}

Komponen buatan sendiri boleh menerima penangan sebagai props, sehingga induk yang menentukan apa yang terjadi. Nama prop penangan diawali on dan huruf kapital, seperti onPesan atau onHapus.

Event merambat ke atas: klik pada tombol di dalam kartu menjalankan onClick tombol, lalu onClick kartu. Penangan menerima objek event sebagai satu-satunya argumen, yang lazim dinamai e. Memanggil e.stopPropagation() di penangan tombol menghentikan perambatan itu. Semua event merambat di React kecuali onScroll.