Form & Controlled Input

Controlled component

Pada HTML biasa, input menyimpan nilainya sendiri. Di React, praktik standarnya adalah menjadikan state sebagai sumber kebenaran — disebut controlled component:

function Form() {
  const [nama, setNama] = useState("");

  return (
    <input
      value={nama}
      onChange={(e) => setNama(e.target.value)}
    />
  );
}

Alurnya: pengguna mengetik → onChange dipanggil → state diperbarui → React merender ulang dengan value baru. Input selalu mencerminkan state.

Jika kamu memberi value tetapi lupa onChange, input menjadi read-only (dan React memperingatkan).

Beberapa input

Gunakan satu state object dan atribut name:

const [data, setData] = useState({ nama: "", email: "" });

function handleUbah(e) {
  setData({ ...data, [e.target.name]: e.target.value });
}

<input name="nama" value={data.nama} onChange={handleUbah} />
<input name="email" value={data.email} onChange={handleUbah} />

[e.target.name] adalah computed property name.

Mengirim form

function handleKirim(e) {
  e.preventDefault();          // cegah reload halaman
  console.log(data);
}

<form onSubmit={handleKirim}>
  ...
  <button type="submit">Kirim</button>
</form>

Pakai onSubmit pada <form> (bukan onClick tombol) agar tombol Enter juga bekerja.

Jenis input lain

Validasi sederhana

const error = !email.includes("@") ? "Email tidak valid" : "";
{error && <p className="error">{error}</p>}

Hitung error dari state saat render; tidak perlu state tambahan.

Mengosongkan form setelah kirim

Setel state kembali ke nilai awal: setData({ nama: "", email: "" }).

Library form

Untuk form besar pertimbangkan React Hook Form — mengurangi render ulang dan memudahkan validasi.