Mengirim Parameter di Event Handler - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenapa Perlu Mengirim Parameter di Event Handler?

Saat bekerja dengan event di React, terkadang kita perlu mengirim data tambahan ke fungsi event handler. Contohnya, kita ingin tahu ID tombol yang diklik, nilai input saat diketik, atau data pengguna yang sedang diproses.

Di JavaScript biasa, kita bisa menggunakan event.target, tapi di React, kita bisa langsung mengirim parameter ke fungsi event handler dengan beberapa cara.

2. Cara Mengirim Parameter di Event Handler

a. Menggunakan Arrow Function di JSX

Ini adalah cara paling umum dan direkomendasikan untuk mengirim parameter.

const ButtonClick = () => {
  const handleClick = (nama) => {
    alert(`Halo, ${nama}!`);
  };

  return <button onClick={() => handleClick("Budi")}>Klik Saya</button>;
};

Di sini, kita menggunakan arrow function untuk memanggil handleClick dengan parameter "Budi".

b. Menggunakan bind di Class Component

Jika menggunakan class component, kita bisa memakai bind() untuk mengikat parameter.

class ButtonClick extends React.Component {
  handleClick(nama) {
    alert(`Halo, ${nama}!`);
  }

  render() {
    return <button onClick={this.handleClick.bind(this, "Budi")}>Klik Saya</button>;
  }
}

Namun, penggunaan bind tidak terlalu disarankan karena bisa berdampak pada performa.

c. Mengirim Parameter dari Event Object

Kadang kita perlu mengakses event sekaligus mengirim parameter.

const InputField = () => {
  const handleChange = (event, label) => {
    console.log(`${label}:`, event.target.value);
  };

  return <input type="text" onChange={(e) => handleChange(e, "Nama")}/>;
};

Di sini, event tetap bisa diakses sebagai parameter pertama, lalu kita tambahkan parameter tambahan setelahnya.

3. Perbedaan onClick={handleClick} vs onClick={() => handleClick()}

Metode	Penjelasan
onClick={handleClick}	Memanggil fungsi langsung tanpa parameter
onClick={() => handleClick("Budi")}	Menggunakan arrow function untuk mengirim parameter

⚠ Jangan tulis onClick={handleClick()} tanpa arrow function, karena itu akan langsung menjalankan fungsi saat komponen dirender, bukan saat tombol diklik.

4. Kesimpulan

 Gunakan arrow function untuk mengirim parameter dengan cara onClick={() => handleClick(param)}.  Jika pakai class component, gunakan bind() untuk mengirim parameter (meskipun kurang optimal).  Event bisa dikirim sebagai parameter pertama di handler.  Hindari langsung memanggil fungsi dalam JSX tanpa arrow function.

Dengan memahami cara mengirim parameter di event handler, kita bisa membuat aplikasi React yang lebih dinamis dan interaktif!