Komponen Jadi "Pendengar": Cara React Ngerespon Aksi Pengguna Pake Event!

Udah bisa bikin komponen yang punya data internal (state) dan bisa ngubah tampilannya sendiri? Keren! Sekarang, gimana caranya biar perubahan state itu bisa dipicu sama aksi dari pengguna? Misalnya, pas pengguna ngeklik tombol, angka di counter nambah. Atau pas pengguna ngetik di input field, teksnya langsung tampil di tempat lain.

Di sinilah Event Handling di React berperan! Event handling di React itu mirip sama event handling di HTML biasa atau Vanilla JS DOM, tapi ada beberapa sentuhan khas React-nya.

Apa Itu Event di React?

Sama kayak di HTML biasa, event di React itu adalah kejadian-kejadian yang terjadi di halaman web, biasanya dipicu sama interaksi pengguna. Contohnya:

• Pengguna ngeklik mouse (click).
• Pengguna ngerakin mouse (mouseover).
• Pengguna neken tombol keyboard (keydown).
• Nilai input form berubah (change).
• Form di-submit (submit).

React bisa "ngedengerin" event-event ini di elemen JSX-mu dan ngejalanin fungsi tertentu sebagai responsnya.

Cara Nanganin Event di JSX: Mirip Atribut HTML, tapi Beda Dikit!

Cara paling umum buat nanganin event di elemen JSX adalah dengan ngasih atribut event handler langsung ke elemen itu.

• Penamaan Atribut Event: Atribut event di JSX pake camelCase.
  • onclick di HTML jadi onClick di JSX.
  • onmouseover di HTML jadi onMouseOver di JSX.
  • onsubmit di HTML jadi onSubmit di JSX.
  • Dan seterusnya.
• Nilai Atribut Event: Nilai dari atribut event ini BUKAN string kode JavaScript kayak di inline HTML (onclick="alert('Halo')") ya! Tapi, nilainya adalah sebuah fungsi JavaScript (atau referensi ke fungsi) yang mau kamu jalanin pas event itu terjadi.

Sintaks Dasar:

<button onClick={fungsiYangMauDijalankan}>Klik Saya</button>
 
<input type="text" onChange={handlePerubahanInput} />

• Di sini, fungsiYangMauDijalankan dan handlePerubahanInput adalah nama fungsi JavaScript yang udah kamu definisiin di komponenmu.
• Kurung kurawal {} dipake karena kita ngasih ekspresi JavaScript (yaitu, nama fungsinya) sebagai nilai atribut.

Contoh Sederhana: Tombol yang Nampilin Pesan pas Diklik

import React from 'react';
 
function TombolSapa() {
  // 1. Definisikan fungsi handler-nya
  const handleClick = () => {
    alert("Tombolnya diklik! Halo dari React!");
    console.log("Event klik terjadi pada tombol.");
  };
 
  return (
    // 2. Pasang fungsi handler ke event onClick tombol
    <button onClick={handleClick}>
      Sapa Aku!
    </button>
  );
}
 
export default TombolSapa;
 

Di contoh ini:

• Kita bikin fungsi handleClick.
• Terus, kita "pasang" fungsi handleClick itu ke atribut onClick di elemen <button>.
• PENTING: Pas masang fungsi handler, kita cuma nulis nama fungsinya aja (handleClick), bukan manggil fungsinya (handleClick()). Kalau kamu tulis onClick={handleClick()}, fungsi itu bakal langsung dijalanin pas komponen di-render, bukan pas tombol diklik! Kita mau fungsinya baru jalan pas event terjadi.

Fungsi Handler Bisa Didefinisiin Langsung (Inline)

Selain bikin fungsi terpisah, kamu juga bisa nulis fungsi handler-nya langsung di dalem atribut event pake arrow function atau fungsi anonim biasa. Ini sering dipake buat handler yang simpel.

function TombolLain() {
  return (
    <button onClick={() => alert("Tombol lain diklik!")}>
      Klik Tombol Ini Juga!
    </button>
  );
}
 
// Contoh dengan input
function InputSapa() {
  const handleChange = (event) => {
    console.log("Nilai input berubah:", event.target.value);
  };
 
  return <input type="text" onChange={handleChange} placeholder="Ketik sesuatu..." />;
}

Arrow function () => alert(...) atau (event) => console.log(...) di sini bakal dijalanin pas event-nya terjadi.

Objek event Sintetik di React

Sama kayak di DOM API biasa, pas sebuah event terjadi dan fungsi handler-mu dipanggil, React juga bakal ngasih objek event sebagai argumen ke fungsi handler itu.

TAPII, objek event di React ini agak spesial. Dia bukan objek event browser asli, tapi sebuah objek event sintetik (SyntheticEvent). React ngebungkus objek event browser asli pake objek sintetik ini biar perilakunya konsisten di semua browser (cross-browser compatibility).

Objek event sintetik ini punya antarmuka (properti dan metode) yang mirip banget sama objek event browser asli, jadi kamu bisa pake cara yang sama buat ngambil informasi darinya.

Beberapa properti/metode objek event yang sering dipake:

• event.target: Elemen DOM yang micu event.
  • Misalnya, di event onChange input, event.target.value bakal ngasih nilai input saat itu.
• event.preventDefault(): Mencegah perilaku default browser buat event itu (misal, mencegah form di-submit atau link pindah halaman).
• event.stopPropagation(): Mencegah event "merambat" (bubbling) ke elemen parent. (Advance).
• Buat event keyboard: event.key, event.code, dll.
• Buat event mouse: event.clientX, event.clientY, dll.

Contoh Menggunakan Objek event:

import React, { useState } from 'react';
 
function FormContoh() {
  const [nama, setNama] = useState('');
 
  const handleSubmit = (event) => {
    event.preventDefault(); // Mencegah form reload halaman
    alert(`Halo, ${nama}! Form berhasil dikirim (pura-puranya).`);
    console.log("Data form yang dikirim:", nama);
  };
 
  const handleInputChange = (event) => {
    setNama(event.target.value); // Ambil nilai dari input dan update state 'nama'
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="namaInput">Nama: </label>
      <input 
        type="text" 
        id="namaInput" 
        value={nama} // Controlled component
        onChange={handleInputChange} 
      />
      <button type="submit">Kirim</button>
    </form>
  );
}
 
export default FormContoh;

Di contoh ini:

• handleSubmit nerima objek event dan manggil event.preventDefault() biar form gak nge-reload.
• handleInputChange nerima objek event dan pake event.target.value buat ngambil nilai terbaru dari input field, terus ngupdate state nama.

Mengoper Argumen Tambahan ke Fungsi Handler

Gimana kalau fungsi handler-mu butuh argumen lain selain objek event? Misalnya, kamu punya daftar item, dan tiap item punya tombol hapus. Kamu pengen tau ID item mana yang tombol hapusnya diklik.

Ada beberapa cara:

1. Pake Arrow Function Pembungkus: Ini cara yang paling umum. Kamu bikin arrow function inline di atribut event, dan di dalem arrow function itu kamu panggil fungsi handler-mu yang sebenernya sambil ngasih argumen yang kamu mau.

   function Item({ id, teks, onHapus }) { // onHapus adalah prop fungsi dari parent
     return (
       <li>
         {teks}
         <button onClick={() => onHapus(id)}>Hapus</button> 
         {/* Arrow function ini manggil onHapus dengan ID item */}
       </li>
     );
   }

2. Pake bind() (Kurang Umum di Functional Components Modern): Metode bind() bisa dipake buat bikin fungsi baru yang this-nya udah di-set dan argumen awalnya udah "di-fix-kan".

   // <button onClick={this.handleHapus.bind(this, id)}>Hapus</button> 
   // Ini lebih sering diliat di Class Components lama.

   Buat Functional Components, arrow function pembungkus biasanya lebih simpel dan gampang dibaca.

Beberapa Event Handler JSX yang Umum

• Mouse Events: onClick, onContextMenu (klik kanan), onDoubleClick, onDrag, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp.
• Keyboard Events: onKeyDown, onKeyPress, onKeyUp.
• Form Events: onChange (buat input, select, textarea), onInput, onInvalid, onReset, onSubmit.
• Focus Events: onFocus, onBlur.
• Clipboard Events: onCopy, onCut, onPaste.
• Dan banyak lagi! Nama-namanya mirip sama event DOM biasa, cuma jadi camelCase.

Event handling adalah cara React bikin UI-mu jadi bener-bener "hidup" dan bisa ngerespon pengguna. Dengan ngasih fungsi handler ke atribut event di JSX, kamu bisa ngejalanin logika JavaScript apa pun pas event itu terjadi, termasuk ngupdate state yang bakal nge-trigger re-render UI.

Kuncinya adalah inget penamaan camelCase buat atribut event, dan cara ngoper fungsi (bukan hasil panggilannya) sebagai handler. Jangan lupa juga manfaatin objek event buat dapet info detail soal event-nya!