Controlled Element dalam JavaScript

   April 11, 2025       Mahatma Mahardhika

---

Controlled Element dalam JavaScript

Table of Contents

• Pengertian Controlled Element
• Perbedaan Controlled dan Uncontrolled Element
• Menggunakan Controlled Element dalam React
• Manfaat Controlled Element
• Contoh Penerapan
• Kesimpulan

---

Pengertian Controlled Element

Controlled Element dalam JavaScript adalah elemen formulir yang nilai dan perubahannya dikendalikan oleh JavaScript, biasanya melalui state dalam React. Nilai elemen ini selalu ditentukan oleh state, bukan DOM secara langsung.

---

Perbedaan Controlled dan Uncontrolled Element

Controlled Element	Uncontrolled Element
Nilai dikendalikan oleh state.	Nilai disimpan langsung dalam DOM.
Memerlukan event onChange untuk mengubah nilai.	Memerlukan ref untuk mengakses nilai.
Lebih mudah dikelola dan divalidasi.	Lebih sederhana tetapi kurang fleksibel.

---

Menggunakan Controlled Element dalam React

Dalam React, controlled element dikelola melalui state.

import React, { useState } from "react";

const ControlledInput = () => {
  const [inputValue, setInputValue] = useState("");

  return (
     setInputValue(e.target.value)}
    />
  );
};

---

Manfaat Controlled Element

• Lebih mudah divalidasi: Memungkinkan validasi langsung saat pengguna mengetik.
• State-driven UI: Nilai input selalu tersinkronisasi dengan state aplikasi.
• Mengelola event lebih baik: Perubahan nilai dikendalikan dengan lebih jelas.

---

Contoh Penerapan

Controlled Element sering digunakan untuk:

• Form login dan registrasi.
• Pencarian real-time dengan filter.
• Input yang memerlukan validasi langsung.

---

Kesimpulan

Controlled Element dalam JavaScript, terutama di React, memberikan kontrol penuh terhadap nilai input melalui state. Ini membantu meningkatkan validasi, kemudahan pengelolaan, dan memastikan UI selalu tersinkronisasi dengan state aplikasi.