Penanganan Event di JSX

Mari kita pelajari cara bekerja dengan event di React. Sebagai contoh, mari kita buat agar saat sebuah blok diklik, muncul alert dengan teks tertentu.

Misalkan kita memiliki fungsi showMess, yang menampilkan alert dengan sebuah pesan, dan dalam kode HTML terdapat sebuah tombol, yang saat diklik kita ingin melihat alert tersebut:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Mari kita tambahkan event onclick ke tombol kita sehingga saat div ini diklik, fungsi showMess akan dijalankan. Untuk melakukannya, tambahkan atribut onClick (dalam camelCase, yaitu onClick, bukan onclick), dan di dalamnya tentukan fungsi yang akan dijalankan saat event tersebut terjadi:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

Seperti inilah cara kerja dengan event: tambahkan sebuah atribut (misalnya, onClick atau onFocus), dan nilainya adalah metode yang akan dipanggil saat event tersebut terjadi.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}