1. Kenapa Perlu Menangkap Aksi User?
Dalam aplikasi web, kita perlu merespons aksi pengguna, seperti klik tombol, hover ke elemen, atau mengetik di input. Kalau tidak, aplikasi kita cuma diam saja seperti patung!
React mempermudah kita dalam menangkap aksi-aksi ini dengan event handling.
2. Event Handling di React
React menggunakan sintaks event yang mirip dengan JavaScript, tetapi dengan sedikit perbedaan: Nama event menggunakan camelCase (bukan lowercase seperti di HTML). Event handler menggunakan fungsi (bukan string seperti di HTML).
Misalnya, di HTML kita biasa menulis:
<button onclick="handleClick()">Klik Saya</button>
Sedangkan di React, kita menulis:
<button onClick={handleClick}>Klik Saya</button>
3. Menangani Event Klik (onClick)
Event onClick digunakan saat pengguna mengklik elemen, misalnya tombol.
const ButtonClick = () => {
const handleClick = () => {
alert("Tombol diklik!");
};
return <button onClick={handleClick}>Klik Saya</button>;
};
4. Menangani Event Hover (onMouseEnter & onMouseLeave)
Kalau mau melakukan sesuatu saat mouse masuk dan keluar dari elemen:
const HoverEffect = () => {
const handleMouseEnter = () => console.log("Mouse masuk!");
const handleMouseLeave = () => console.log("Mouse keluar!");
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
Arahkan mouse ke sini!
</div>
);
};
5. Menangani Event Input (onChange)
onChange digunakan saat pengguna mengetik di input atau mengubah nilai elemen formulir.
const InputField = () => {
const [text, setText] = useState("");
const handleChange = (e) => {
setText(e.target.value);
};
return (
<input type="text" value={text} onChange={handleChange} />
);
};
6. Mencegah Perilaku Default dengan preventDefault()
Kadang kita ingin mencegah perilaku bawaan, misalnya form reload setelah submit.
const FormSubmit = () => {
const handleSubmit = (e) => {
e.preventDefault(); // Mencegah reload
alert("Form dikirim!");
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">Kirim</button>
</form>
);
};
7. Menggunakan Parameter di Event Handler
Kita bisa mengirim parameter ke fungsi event handler dengan cara berikut:
const ButtonWithParam = () => {
const handleClick = (nama) => {
alert(`Halo, ${nama}!`);
};
return <button onClick={() => handleClick("Budi")}>Klik Saya</button>;
};
8. Kesimpulan
React menggunakan camelCase untuk event handling. Gunakan fungsi sebagai event handler, bukan string seperti di HTML. onClick untuk klik, onMouseEnter/onMouseLeave untuk hover, onChange untuk input. Gunakan preventDefault() untuk mencegah perilaku bawaan.
Dengan memahami event di React, kita bisa membuat aplikasi yang lebih interaktif dan responsif terhadap aksi pengguna. Coba eksperimen dengan event-event ini di proyekmu!
0 Comments