Event di React vs JavaScript Biasa - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Perbedaan Event di React dan JavaScript Biasa

Ketika bekerja dengan event di JavaScript biasa dan React, ada beberapa perbedaan mendasar. Walaupun tujuannya sama—menangkap aksi pengguna—cara React menangani event sedikit berbeda.

Fitur	JavaScript Biasa	React
Penulisan event	onclick="handleClick()"	onClick={handleClick}
CamelCase	Tidak	Ya
addEventListener?	Ya	Tidak perlu (langsung di JSX)
event.preventDefault()	Ya	Ya (pakai SyntheticEvent)
Binding this	Harus diikat manual dalam class component	Tidak perlu di functional component

2. Contoh Event di JavaScript Biasa vs React

a. Klik Tombol

JavaScript Biasa

<button id="myButton">Klik Saya</button>
<script>
  document.getElementById("myButton").addEventListener("click", function () {
    alert("Tombol diklik!");
  });
</script>

React

const ButtonClick = () => {
  const handleClick = () => {
    alert("Tombol diklik!");
  };
  return <button onClick={handleClick}>Klik Saya</button>;
};

b. Menangani Form Submission

JavaScript Biasa

<form id="myForm">
  <input type="text" id="myInput" />
  <button type="submit">Kirim</button>
</form>
<script>
  document.getElementById("myForm").addEventListener("submit", function (e) {
    e.preventDefault();
    alert("Form dikirim!");
  });
</script>

React

const FormSubmit = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Form dikirim!");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Kirim</button>
    </form>
  );
};

3. Synthetic Event di React

React tidak menggunakan event DOM langsung seperti JavaScript biasa. Sebagai gantinya, React menggunakan SyntheticEvent, yaitu pembungkus event yang kompatibel di semua browser.

const InputField = () => {
  const handleChange = (event) => {
    console.log("Nilai input:", event.target.value);
  };
  return <input type="text" onChange={handleChange} />;
};

Dengan SyntheticEvent, React memastikan kinerja event lebih optimal dan konsisten.

4. Haruskah Pakai addEventListener di React?

Tidak perlu! Di JavaScript biasa, kita harus menggunakan addEventListener, tetapi di React cukup tambahkan event handler langsung di JSX.

JavaScript Biasa (harus addEventListener)

<button id="btn">Klik</button>
<script>
  document.getElementById("btn").addEventListener("click", function () {
    alert("Diklik!");
  });
</script>

React (cukup onClick langsung)

const Button = () => {
  return <button onClick={() => alert("Diklik!")}>Klik</button>;
};

5. Kesimpulan

React menggunakan SyntheticEvent untuk menangani event.  Tidak perlu addEventListener, cukup gunakan props event seperti onClick. Event di React menggunakan camelCase, sedangkan di HTML tidak.  React menangani event lebih efisien dan kompatibel di berbagai browser.

Dengan memahami perbedaan event di React dan JavaScript biasa, kita bisa lebih nyaman dalam menangani interaksi user di aplikasi React kita.