Cara Menangani Events di Function Component dengan Praktis

Dalam React, event handling adalah salah satu konsep penting yang memungkinkan kita menangani interaksi pengguna, seperti klik tombol, input teks, atau perubahan nilai dalam form. Jika kamu sudah terbiasa dengan event di JavaScript biasa, konsep event handling di React sedikit berbeda.

React menggunakan synthetic events, yang merupakan abstraksi dari event bawaan browser untuk meningkatkan performa dan kompatibilitas lintas browser. Artikel ini akan membahas cara menangani events di Function Component secara efektif dan best practices dalam penggunaannya.

1. Bagaimana Event Bekerja di React?

Event di React sangat mirip dengan event di JavaScript, tetapi ada beberapa perbedaan utama:
✅ Menggunakan camelCase, bukan lowercase (misalnya onClick bukan onclick).
✅ Menangani event dengan fungsi, bukan atribut string.
✅ React menggunakan Synthetic Events untuk kompatibilitas lintas browser.
✅ Menggunakan fungsi event handler yang dapat menerima parameter.

Berikut contoh dasar menangani event onClick di React:

import React from 'react';

function ButtonClick() {
  function handleClick() {
    alert('Tombol diklik!');
  }

  return <button onClick={handleClick}>Klik Saya</button>;
}

export default ButtonClick;

📌 Penjelasan:

• onClick={handleClick} → React menangani event menggunakan function reference, bukan string.
• Saat tombol diklik, fungsi handleClick() akan dipanggil.

Output:

Saat tombol diklik, akan muncul alert: "Tombol diklik!"

2. Menggunakan Event dengan useState

Sering kali, kita perlu menangani event untuk mengubah state dalam Function Component menggunakan useState().

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={handleIncrement}>Tambah</button>
    </div>
  );
}

export default Counter;

📌 Penjelasan:

• useState(0) → Menyimpan state dengan nilai awal 0.
• setCount(count + 1) → Mengupdate state setiap kali tombol ditekan.
• Komponen akan re-render setiap kali state berubah.

Output:

Counter: 0  
[Klik tombol ➜ Counter: 1]

3. Menggunakan Event Handler dengan Parameter

Jika kita ingin mengirim parameter ke event handler, gunakan arrow function atau fungsi biasa dengan bind().

import React from 'react';

function Greeting() {
  function handleGreet(name) {
    alert(`Halo, ${name}!`);
  }

  return <button onClick={() => handleGreet('John')}>Sapa Saya</button>;
}

export default Greeting;

📌 Penjelasan:

• Menggunakan () => handleGreet('John') untuk meneruskan parameter.
• Jika menggunakan fungsi langsung tanpa arrow function, maka fungsi akan dieksekusi saat render, bukan saat diklik.

Alternatif dengan bind() dalam Class Component:

<button onClick={this.handleGreet.bind(this, 'John')}>Sapa Saya</button>

4. Mencegah Perilaku Default dengan preventDefault

Beberapa event bawaan browser, seperti submit form atau klik link, perlu dicegah agar tidak menyebabkan reload halaman.

import React from 'react';

function Form() {
  function handleSubmit(event) {
    event.preventDefault();
    alert('Form berhasil dikirim!');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Kirim</button>
    </form>
  );
}

export default Form;

📌 Penjelasan:

• event.preventDefault() mencegah perilaku bawaan form yang akan me-reload halaman setelah submit.

5. Event onChange untuk Menangani Input Form

Saat menangani input pengguna, kita bisa menggunakan event onChange untuk menangkap perubahan nilai input.

import React, { useState } from 'react';

function InputField() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>Hasil Input: {text}</p>
    </div>
  );
}

export default InputField;

📌 Penjelasan:

• onChange={handleChange} → Menangkap setiap perubahan input.
• event.target.value → Mengambil nilai input saat ini.
• State diperbarui setiap kali pengguna mengetik di input.

6. Best Practices dalam Menangani Events di Function Component

✅ Gunakan arrow function untuk event handler sederhana.
✅ Gunakan useState() untuk mengelola perubahan state saat event terjadi.
✅ Gunakan preventDefault() untuk mencegah reload halaman pada form.
✅ Hindari menggunakan anonymous function dalam onClick jika komponen sering di-render ulang untuk mengoptimalkan performa.

7. Kesimpulan

• Events di React menggunakan camelCase (onClick, onChange, dll.).
• Event handler ditulis sebagai fungsi, bukan string.
• Gunakan useState() untuk menangani event yang mengubah nilai state.
• Gunakan preventDefault() untuk mencegah perilaku bawaan browser.
• Gunakan arrow function atau bind() untuk meneruskan parameter ke event handler.

Dengan memahami cara menangani events di Function Component, kita bisa membuat aplikasi React yang lebih interaktif, efisien, dan mudah dikelola!