Input Terkontrol

Input teks menimbulkan sebuah pertanyaan: pengguna mengetik di dalam kotak, tetapi komponenmu memiliki state: siapa yang memiliki teks tersebut? Di React, jawabannya adalah: state yang memilikinya. Ini disebut input terkontrol:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Dua penghubung membentuk perulangan:

• value={name}: kotak selalu menampilkan state
• onChange: setiap penekanan tombol memanggil setter dengan e.target.value, teks terkini di kotak

Jadi, saat kamu mengetik, state diperbarui, lalu halaman dirender ulang, dan kotak menampilkan state yang baru. Keuntungannya, teks tersimpan dalam variabel yang bisa kamu validasi, ubah, hapus, atau tampilkan di bagian lain halaman.