EVENTS REACT

Dalam React, kita dapat menangani event dengan cara yang mirip dengan JavaScript biasa, tetapi dengan beberapa perbedaan penting. Kita menggunakan atribut camelCase untuk menangani event dan kita harus mengirimkan fungsi sebagai nilai dari atribut tersebut.

Contoh Penanganan Event

import React from 'react';
const App = () => {
  const handleClick = () => {
    alert('Tombol diklik!');
  };    

  return (
    <div>
      <h1>Contoh Penanganan Event</h1>
      <button onClick={handleClick}>Klik Saya</button>
    </div>
  );
};

export default App;

Pada contoh di atas, kita membuat fungsi handleClick yang akan dipanggil ketika tombol diklik. Kita mengaitkan fungsi ini dengan atribut onClick pada elemen <button>. Ketika tombol diklik, fungsi handleClick akan dijalankan dan menampilkan alert.

Event dengan Parameter

Jika kita ingin mengirimkan parameter ke fungsi event handler, kita bisa menggunakan arrow function:

import React from 'react';
const App = () => {
  const handleClick = (name) => {
    alert(`Halo, ${name}!`);      
  };    

  return (
    <div>
      <h1>Contoh Event dengan Parameter</h1>
      <button onClick={() => handleClick('Hilman')}>Klik Saya</button>
    </div>
  );
};  

export default App;

Pada contoh ini, kita menggunakan arrow function untuk memanggil handleClick dengan parameter 'Hilman'. Ketika tombol diklik, alert akan menampilkan pesan yang menyapa nama yang diberikan.