ReactJS #8: Menangani Event – Membuat Tombol Bisa Diklik

ReactJS #8: Menangani Event

Membuat Tombol Bisa Diklik dan Aksi Lainnya

Halo, jagoan event! 🎮

Pernahkah kamu menekan bel rumah? Saat bel ditekan, akan keluar suara "ding-dong". Di React, kita juga bisa membuat sesuatu terjadi saat pengguna melakukan aksi, misalnya mengeklik tombol, mengetik di kotak input, atau mengirim formulir. Aksi-aksi ini disebut event.

🔔 ➡️ "Ding-Dong!"
Event seperti menekan bel: kita bisa memasang reaksi!

🎯 Event di React

Di React, penulisan event hampir sama dengan HTML, tapi ada sedikit perbedaan:

• Nama event menggunakan camelCase (huruf besar di tengah), misalnya onClick, onChange, onSubmit.
• Nilai event handler ditulis dengan kurung kurawal { }, berisi fungsi yang akan dijalankan.

Contoh di HTML: <button onclick="alert('Halo')">Klik</button>
Di React: <button onClick={handleClick}>Klik</button>

🖱️ Contoh 1: onClick pada Tombol

Buat komponen sederhana yang menampilkan pesan saat tombol diklik.

import { useState } from 'react'; function TombolKlik() { const [pesan, setPesan] = useState(''); function handleClick() { setPesan('Tombol sudah diklik! 🎉'); } return ( <div> <button onClick={handleClick}>Klik Aku!</button> <p>{pesan}</p> </div> ); }

Penjelasan:

• onClick={handleClick} – kita pasang fungsi handleClick sebagai penangan event. Fungsi ini akan dipanggil saat tombol diklik.
• Di dalam handleClick, kita mengubah state pesan sehingga muncul teks di layar.

📌 Cara Lain Menulis Handler

Kita bisa menulis fungsi langsung di dalam onClick (fungsi panah inline):

<button onClick={() => alert('Tombol diklik!')}>Klik</button>

Atau jika handler perlu argumen:

function sapa(nama) { alert('Halo ' + nama); } // Di JSX: <button onClick={() => sapa('Andi')}>Sapa Andi</button>

⚠️ Hati-hati: Jangan tulis onClick={sapa('Andi')} karena fungsi akan langsung dipanggil saat render, bukan saat diklik. Selalu gunakan fungsi panah jika perlu argumen.

📝 Contoh 2: onChange pada Input (Menangkap Ketikan)

Event onChange dipanggil setiap kali nilai input berubah. Biasanya digunakan bersama state.

import { useState } from 'react'; function FormNama() { const [nama, setNama] = useState(''); function handleChange(event) { setNama(event.target.value); } return ( <div> <input type="text" value={nama} onChange={handleChange} placeholder="Ketik namamu" /> <p>Halo, {nama || 'teman'}! 👋</p> </div> ); }

event.target.value berisi teks terbaru dari input. State akan diperbarui setiap kali ada ketikan, dan komponen di-render ulang dengan nilai baru.

📬 Contoh 3: onSubmit pada Form

Saat form dikirim (biasanya dengan tombol submit atau tekan Enter), kita bisa menangkapnya dengan onSubmit. Penting untuk mencegah perilaku default form (refresh halaman) dengan event.preventDefault().

import { useState } from 'react'; function FormPesan() { const [pesan, setPesan] = useState(''); function handleSubmit(event) { event.preventDefault(); // mencegah refresh alert('Pesan dikirim: ' + pesan); } return ( <form onSubmit={handleSubmit}> <input type="text" value={pesan} onChange={(e) => setPesan(e.target.value)} placeholder="Ketik pesan rahasia" /> <button type="submit">Kirim</button> </form> ); }

Tanpa event.preventDefault(), halaman akan reload saat form dikirim dan kita kehilangan state.

🎭 Event Lain yang Berguna

• onMouseEnter, onMouseLeave – saat mouse masuk/keluar elemen.
• onFocus, onBlur – saat input mendapat/kehilangan fokus.
• onKeyDown, onKeyUp – saat tombol keyboard ditekan.
• onDoubleClick – klik dua kali.

Contoh penggunaan onMouseEnter untuk mengubah warna:

function KotakAjaib() { const [warna, setWarna] = useState('lightblue'); return ( <div style={{ backgroundColor: warna, padding: '50px', borderRadius: '30px' }} onMouseEnter={() => setWarna('gold')} onMouseLeave={() => setWarna('lightblue')} > Arahkan mouse ke sini! </div> ); }

🧪 Latihan: Aplikasi "Pesan Rahasia"

Buat komponen PesanRahasia dengan ketentuan:

1. Ada input teks untuk mengetik pesan rahasia.
2. Ada tombol "Tampilkan Pesan" yang jika diklik akan menampilkan pesan di bawah input.
3. Ada tombol "Hapus" yang mengosongkan input dan menyembunyikan pesan.
4. Gunakan state untuk menyimpan teks input dan teks yang ditampilkan.
5. Tambahkan fitur: saat menekan tombol Enter di input, pesan langsung ditampilkan (petunjuk: gunakan event onKeyDown dan cek event.key === 'Enter').

Kerangka kode (coba isi sendiri):

import { useState } from 'react'; function PesanRahasia() { const [inputValue, setInputValue] = useState(''); const [pesanTampil, setPesanTampil] = useState(''); function tampilkanPesan() { ??? // set pesanTampil dengan inputValue } function hapusPesan() { ??? // set inputValue dan pesanTampil menjadi '' } function handleKeyDown(event) { if (event.key === 'Enter') { tampilkanPesan(); } } return ( <div style={{ padding: '20px' }}> <h3>✉️ Pesan Rahasia</h3> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyDown={handleKeyDown} placeholder="Ketik pesan rahasia..." /> <br /> <button onClick={tampilkanPesan}>🔓 Tampilkan</button> <button onClick={hapusPesan}>🗑️ Hapus</button> {pesanTampil && ( <div style={{ marginTop: '20px', backgroundColor: '#d4edda', padding: '15px', borderRadius: '30px' }}> <strong>Pesan rahasia:</strong> {pesanTampil} </div> )} </div> ); }

Isi bagian ??? dengan kode yang tepat. Coba jalankan dan lihat hasilnya.

💡 Jawaban: setPesanTampil(inputValue); untuk menampilkan, dan setInputValue(''); setPesanTampil(''); untuk menghapus.

🚀 Kesimpulan

• Event di React mirip HTML tapi pakai camelCase dan nilai berupa fungsi.
• onClick untuk klik, onChange untuk input, onSubmit untuk form.
• Gunakan event.preventDefault() untuk mencegah refresh pada form.
• Untuk mengirim argumen ke handler, gunakan fungsi panah di dalam atribut event.
• Kita bisa membuat interaksi yang seru dengan kombinasi state dan event.

Di artikel selanjutnya kita akan belajar tentang useState Lebih Dalam dan bermain dengan counter, input, dan tampilan dinamis. Sampai jumpa!

Lanjut ke ReactJS #9: useState Lebih Dalam ▶

✨ Event membuat aplikasi kita hidup dan interaktif! ✨