Handling Event dalam ReactJS
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:onClickbukanonclick). - 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.
