React · pelajaran 2
State dan binding
Kenapa angkanya tidak naik?
Tekan Tambah beberapa kali. Di tab Konsol, jumlah memang bertambah, tapi layar tetap Jumlah: 0.
React hanya memperbarui layar saat komponen dirender ulang, yaitu saat fungsi App dipanggil lagi. Mengubah variabel biasa tidak memberi tahu React apa pun. Dan kalaupun App dipanggil lagi, let jumlah = 0 akan mulai dari nol lagi.
useState
const [jumlah, setJumlah] = useState(0);jumlahadalah nilai saat ini. React menyimpannya di luar fungsi, jadi tidak hilang saat render ulang.setJumlah(baru)menyimpan nilai baru dan meminta React merender ulang komponen.
Setelah memakai useState, buka tab Komponen. Di sebelah App terlihat jumlah=…. Tekan Tambah: kotak kuning berkedip di layar (komponen dirender ulang), dan detailnya menulis alasannya: state: jumlah.
Binding: input yang terikat ke state
Input biasa menyimpan teksnya sendiri. Pada controlled input, state-lah yang memegang teks:
<input value={nama} onChange={(e) => setNama(e.target.value)} />Alurnya satu putaran: ketik → onChange → setNama → render ulang → value={nama} menampilkan teks baru. Karena teks ada di state, bagian lain (seperti sapaan Halo, …) bisa langsung memakainya.
Coba
- Isi
useState(10): angka mulai dari 10. - Coba
value={nama}tanpaonChange. Kenapa input tidak bisa diketik?
Misi
- Ganti
let jumlahdenganuseStatesehingga Tambah menaikkanJumlah: N. - Tambahkan tombol Reset yang mengembalikan ke
Jumlah: 0. - Ikat input nama ke state, lalu tampilkan
Halo, <nama>.
Selanjutnya: Daftar dan key · Semua pelajaran