Materi
Isian terkontrol mendapat nilainya dari state: value={nama} dan onChange={(e) => setNama(e.target.value)}. Setiap ketikan memanggil onChange, state diperbarui, lalu React merender isian dengan nilai baru. Karena state selalu sama dengan isi isian, nilainya bisa langsung dipakai di bagian lain, misalnya untuk pratinjau atau pemeriksaan.
const [kota, setKota] = useState("Medan");
const [setuju, setSetuju] = useState(false);
<select value={kota} onChange={(e) => setKota(e.target.value)}>
<option value="Medan">Medan</option>
<option value="Binjai">Binjai</option>
</select>
<input type="checkbox" checked={setuju} onChange={(e) => setSetuju(e.target.checked)} />value tanpa onChange membuat isian tidak bisa diketik: React terus mengembalikan isinya ke value, lalu mencetak peringatan bahwa isian itu hanya-baca. Checkbox dan radio dikendalikan dengan checked, dan nilainya dibaca dari e.target.checked, bukan e.target.value.
value isian berupa teks, termasuk pada input type="number". "2" + 1 menghasilkan "21", jadi ubah dulu dengan Number sebelum dihitung, seperti contoh umur di dokumentasi React yang menyimpan teksnya di state lalu menghitung Number(umur) saat render.
Formulir dikirim lewat onSubmit pada elemen form, bukan onClick pada tombolnya. Tanpa e.preventDefault(), browser mengirim formulir dan memuat ulang halaman, sehingga semua state hilang.
