Respon Cepat: Menangani Event Pengguna di Aplikasi React JS Kamu (Part 6)

Rifqi An Rifqi An
•
Februari 28, 2026


Respon Cepat: Menangani Event Pengguna di Aplikasi React JS Kamu (Part 6)

Waduh, rasanya baru kemarin kita ngobrolin soal `props` dan `state`, eh sekarang udah masuk Part 6 aja nih seri Belajar React kita! Kalau aplikasi React kamu udah bisa nampilin data atau ngatur `state` doang tanpa interaksi pengguna, itu namanya cuma pajangan, bro/sis. Nah, di artikel kali ini, kita bakal bongkar habis gimana caranya bikin aplikasi kita jadi hidup dan responsif terhadap setiap sentuhan, klik, atau ketikan user. Siap-siap ngoding, karena ini bagian seru yang bikin aplikasi kamu beneran interaktif!

Daftar Isi

Apa itu Event di React? (The Magic Behind Your Clicks)

Bayangin aplikasi kamu itu kayak robot yang cuma bisa diem. Biar dia gerak dan ngelakuin sesuatu, kita butuh "perintah". Nah, perintah ini datang dari pengguna, misalnya pas mereka nge-klik tombol, ngisi form, atau bahkan cuma nge-scroll halaman. Dalam dunia pemrograman, "perintah" dari pengguna ini kita sebut event. Di React, penanganan event itu mirip banget sama di JavaScript biasa, tapi ada sedikit sentuhan React-nya. Kita pakai camelCase untuk nama-nama event (misalnya `onClick` bukan `onclick`) dan biasanya kita pass sebuah fungsi sebagai handler-nya. Lebih rapi, kan? React bakal otomatis ngasih objek `event` sintetis (SyntheticEvent) ke fungsi handler kita, yang mirip banget sama objek `event` asli dari browser, tapi udah dinormalisasi biar konsisten di semua browser. Mantap jiwa!

Dasar-Dasar Penanganan Event: onClick dan Kawan-kawan

Event yang paling sering kita temui? Tentu saja `onClick`! Bayangin kamu punya tombol "Klik Aku Dong!". Nah, gimana caranya biar tombol ini ngelakuin sesuatu pas diklik? Gampang banget!

Lihat contoh kode di bawah ini:


import React from 'react';

function TombolKlik() {
  function handleKlik() {
    alert('Tombolku sudah diklik! Semoga harimu cerah :)');
  }

  return (
    <button onClick={handleKlik}>
      Klik Aku Dong!
    </button>
  );
}

export default TombolKlik;

Gimana, gampang kan? Kita cuma define fungsi `handleKlik` terus langsung deh kita pasang di atribut `onClick` pada elemen `&lt;button&gt;`. Ingat, kita passing referensi fungsi (`handleKlik`), bukan memanggil fungsinya langsung (`handleKlik()`). Kalau kamu tulis `onClick={handleKlik()}`, fungsinya bakal langsung jalan pas komponennya di-render, bukannya pas diklik. Ini salah satu jebakan Batman yang sering bikin developer baru pusing tujuh keliling. Jangan sampai kejebak ya!

Mengirim Data Bersama Event: Saatnya Lebih Canggih!

Kadang, kita perlu ngirim data tambahan ke fungsi handler kita. Misalnya, kamu punya daftar item dan tiap item punya tombol "Hapus". Nah, gimana caranya si tombol "Hapus" tau item mana yang harus dihapus?

Di sinilah arrow function beraksi!


import React from 'react';

function DaftarBarang() {
  const barang = ['Kopi Pahit', 'Mie Instan Pedas', 'Laptop Lemot'];

  function handleHapusBarang(namaBarang, event) {
    console.log(`Menghapus: ${namaBarang}`);
    console.log('Event object:', event); // event object juga ikut kebawa!
    alert(`${namaBarang} berhasil dibuang dari daftar penderitaan.`);
  }

  return (
    <div>
      <h3>Daftar Belanja Programmer yang Sedang Lemes</h3>
      <ul>
        {barang.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={(event) => handleHapusBarang(item, event)} style={{ marginLeft: '10px' }}>
              Hapus
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DaftarBarang;

Perhatikan bagian `onClick={(event) =&gt; handleHapusBarang(item, event)}`. Dengan arrow function, kita bisa membungkus pemanggilan fungsi `handleHapusBarang` dan mengirimkan `item` (data dari `map` kita) sebagai argumen pertama. `event` object juga bisa tetap kita passing sebagai argumen kedua kalau kita butuh. Ini teknik ampuh buat aplikasi yang dinamis!

Jenis-Jenis Event Lain yang Sering Ketemu

Selain `onClick`, banyak banget event lain yang berguna, terutama kalau kamu bikin form atau interaksi yang lebih kompleks. Beberapa yang sering muncul:
  • `onChange`: Terjadi saat nilai input, textarea, atau select berubah. Penting buat ngatur `state` form!
  • `onSubmit`: Terjadi saat form disubmit.
  • `onMouseEnter` / `onMouseLeave`: Saat kursor masuk/keluar dari elemen. Cocok buat efek hover.
  • `onFocus` / `onBlur`: Saat elemen mendapat/kehilangan fokus.
  • `onKeyDown` / `onKeyUp` / `onKeyPress`: Terkait interaksi keyboard.

Intinya, kalau ada event di HTML, kemungkinan besar ada versi camelCase-nya di React yang siap kamu pakai. Tinggal panggil aja!

Mencegah Perilaku Default Browser: Jurus Pamungkas event.preventDefault()

Pernah ngalamin pas ngisi form terus pas disubmit, halamannya langsung ke-refresh? Atau pas nge-klik link, malah langsung pindah halaman padahal maunya cuma ngelakuin sesuatu di halaman itu sendiri? Itu karena browser punya perilaku default untuk beberapa elemen. Nah, di sinilah `event.preventDefault()` datang sebagai pahlawan! Dia akan menghentikan perilaku default browser tersebut. Paling sering dipakai di form atau link `&lt;a&gt;`. 

import React from 'react';

function FormulirAjaib() {
  function handleSubmit(event) {
    // Ini penting banget! Mencegah halaman reload
    event.preventDefault(); 
    
    alert('Formulir berhasil disubmit tanpa refresh! Data udah di server, semoga gak error.');
    console.log('Data formulir diproses di sini...');
    // Biasanya di sini kita kirim data ke API atau update state
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nama Pengguna Misterius:
        <input type="text" />
      </label>
      <br />
      <button type="submit">Kirim Data Rahasia</button>
    </form>
  );
}

export default FormulirAjaib;

Lupa pakai `event.preventDefault()` ini salah satu `bug` paling umum dan bikin frustrasi pas awal-awal belajar. Udah capek-capek ngisi form, eh malah refresh, data hilang semua! Rasanya mau banting keyboard. Jadi, jangan sampai lupa ya!

Oke, sampai sini dulu Part 6 kita. Semoga makin paham ya gimana cara bikin aplikasi React kamu jadi lebih hidup dan responsif. Nanti di Part 7, mungkin kita bisa bahas gimana cara ngatur form yang lebih kompleks dengan `useState` atau `useReducer` bareng event-event ini. Pokoknya, siapin kopi dan cemilan buat ngoding terus!

Latihan: Misi Penyelamatan Tombol Gemoy!

Kamu bekerja di sebuah startup yang bikin aplikasi pelacak kucing hilang. CEO-mu yang super idealis mau setiap tombol di aplikasi kalau diklik harus mengeluarkan suara "Meow!" tapi tidak boleh mengganggu perilaku aslinya (misal: tombol submit tetap submit form, tombol hapus tetap menghapus). Kamu juga diminta membuat tombol khusus "SOS Kucing!" yang kalau diklik, dia akan menampilkan alert "Kucing tertangkap alien! Lari!!!" dan warnanya berubah jadi merah menyala (tanpa refresh halaman).

Tugas kamu:

  1. Buatlah sebuah komponen React bernama `TombolGemoy`.
  2. Komponen ini harus bisa menerima `onClick` handler dari parent-nya (misalnya, untuk submit form atau hapus data).
  3. Setiap kali `TombolGemoy` diklik, ia harus memanggil fungsi `console.log("Meow!")` TANPA mengganggu `onClick` yang diberikan oleh parent.
  4. Buat satu `TombolGemoy` khusus dengan teks "SOS Kucing!" yang kalau diklik, selain "Meow!", juga menampilkan `alert("Kucing tertangkap alien! Lari!!!")` dan mengubah `style` tombolnya menjadi `background-color: red; color: white;`. Ingat, tidak boleh refresh halaman!

Selamat mencoba! Kalau berhasil, berarti kamu sudah siap jadi pahlawan bagi kucing-kucing malang di alam semesta React!

Bagikan Artikel Ini