Handling Event dalam ReactJS

   April 03, 2025       Mahatma Mahardhika

---

Handling Event dalam ReactJS

Table of Contents

• Pengertian Handling Event
• Cara Menangani Event dalam React
• Menggunakan Event Handler
• Event Object dalam React
• Binding this dalam Class Component
• Contoh Penerapan
• Kesimpulan

---

Pengertian Handling Event

Handling event dalam ReactJS adalah cara untuk menangani interaksi pengguna, seperti klik tombol, perubahan input, atau pergerakan mouse, dengan menggunakan event handler.

---

Cara Menangani Event dalam React

• Event dalam React menggunakan camelCase (contoh: onClick bukan onclick).
• Event handler diberikan dalam bentuk fungsi, bukan string seperti pada HTML.

const handleClick = () => {
  alert("Tombol diklik!");
};

return ;

---

Menggunakan Event Handler

Event handler dapat dideklarasikan sebagai fungsi biasa atau fungsi panah.

const Button = () => {
  const handleClick = () => {
    console.log("Tombol diklik!");
  };

  return ;
};

---

Event Object dalam React

React menyediakan objek event yang dapat digunakan dalam event handler.

const handleChange = (event) => {
  console.log("Nilai input: ", event.target.value);
};

return ;

---

Binding this dalam Class Component

Dalam Class Component, event handler perlu diikat ke this agar memiliki konteks yang benar.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return ;
  }
}

---

Contoh Penerapan

Event handling sering digunakan dalam form, tombol, dan elemen interaktif lainnya.

const Form = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Form berhasil dikirim!");
  };

  return (
    

      
    
  );
};

---

Kesimpulan

Handling event dalam ReactJS memungkinkan kita untuk menangani interaksi pengguna dengan cara yang efisien dan terstruktur. Dengan memahami cara kerja event handler, binding this, dan penggunaan event object, kita dapat membangun aplikasi yang lebih interaktif dan responsif.