⭐ Belajar React #5 — Handling Events & Controlled Components

Setelah mempelajari state, conditional rendering, dan list rendering, sekarang kita masuk ke bagian penting lain dari React:

Bagaimana cara menangani event (klik, input, submit) dan bagaimana mengontrol data dalam form melalui konsep Controlled Components.

Dua konsep ini adalah fondasi untuk membuat form, search bar, login form, dan hampir semua interaksi user.

---

🎯 Apa yang Akan Kamu Pelajari?

1. Cara menangani event di React

2. Perbedaan event handler React vs JavaScript biasa

3. Apa itu Controlled Component

4. Cara membuat input yang selalu sinkron dengan state

5. Form handling lengkap (input, textarea, select)

6. Contoh aplikasi: Form Login sederhana

---

🟦 1. Handling Events di React

React menggunakan event handler yang mirip seperti JavaScript, tetapi ada beberapa perbedaan:

✔ Penamaan event menggunakan camelCase

HTML biasa:

<button onclick="handleClick()">Klik</button>

React:

<button onClick={handleClick}>Klik</button>

---

✔ Event handler ditulis sebagai fungsi JavaScript, bukan string

HTML:

<button onclick="alert('hi')">Klik</button>

React:

<button onClick={() => alert("hi")}>Klik</button>

---

🔹 Contoh Event Handler

function ButtonExample() {
  function handleClick() {
    alert("Tombol ditekan!");
  }

  return <button onClick={handleClick}>Klik Saya</button>;
}

Atau versi arrow function:

<button onClick={() => alert("Klik")} />

---

🟦 2. Apa Itu Controlled Component?

Controlled Component adalah elemen form (input, textarea, select) yang nilai-nya dikontrol oleh state React.

Artinya:

• User mengetik → React menangkap input → React memperbarui state → state mengubah UI

Alurnya menjadi:

UI → Event → State → UI

Inilah yang membuat React UI selalu konsisten dengan data aplikasi.

---

🔹 Contoh Controlled Input

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Masukkan nama"
      />
      <p>Halo, {name}</p>
    </div>
  );
}

Di sini:

• value={name} → UI dikontrol oleh state

• onChange → mengubah state setiap kali user mengetik

---

🟦 3. Controlled Textarea

<textarea
  value={message}
  onChange={(e) => setMessage(e.target.value)}
/>

Pada React, textarea diperlakukan sama dengan input. Tidak lagi menggunakan innerText seperti HTML biasa.

---

🟦 4. Controlled Select (Dropdown)

<select value={selected} onChange={(e) => setSelected(e.target.value)}>
  <option value="">Pilih warna</option>
  <option value="red">Merah</option>
  <option value="blue">Biru</option>
</select>

---

🟩 Contoh Aplikasi: Form Login Sederhana

import { useState } from "react";
function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  function handleSubmit(e) {
    e.preventDefault(); // Mencegah reload halaman
    alert(`Email: ${email}\nPassword: ${password}`);
  }
  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>
      <div>
        <label>Email</label>
        <input 
          type="email" 
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Masukkan email"
        />
      </div>
      <div>
        <label>Password</label>
        <input 
          type="password" 
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Masukkan password"
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}
export default LoginForm;

Konsep controlled components sudah lengkap:

• Setiap input dikontrol oleh state

• Event onChange memperbarui nilai

• Event onSubmit memproses form

---

Pada artikel ini kamu belajar:

✔ Cara menangani event di React
✔ Perbedaan event handler React vs HTML biasa
✔ Konsep Controlled Components
✔ Input, textarea, select dengan state
✔ Cara membuat form login sederhana

Konsep ini adalah pondasi dari semua form dan interaksi user di React.