Bekerja dengan Input di React

Bekerja dengan input di React dilakukan dengan menggunakan state. Setiap input diberi state-nya sendiri, yang berisi value input.

Mari kita lihat contohnya. Misalkan kita memiliki sebuah input:

function App() {
	return <div>
		<input />
	</div>;
}

Misalkan juga kita memiliki state:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

Mari kita ikat state kita ke atribut value input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

Dalam kasus ini, yang terjadi adalah saat state berubah, teks input akan berubah secara reaktif.

Namun, ini memberikan efek samping yang menarik: sekarang saat kode dijalankan di browser, teks dalam input tidak dapat diubah! Mengapa: karena saat teks dimasukkan ke input, state value tidak berubah, oleh karena itu, teks dalam input seharusnya tidak berubah.

Cobalah sendiri. Salin kode saya dan jalankan di tempat Anda. Coba ubah teks dalam input - Anda tidak akan bisa. Buka konsol browser - Anda akan melihat peringatan dari React di sana. Peringatan ini menunjukkan kepada kita bahwa kita telah mengikat state ke input, tetapi dengan demikian telah mengunci input.

Mari kita buat agar teks dapat dimasukkan ke input kita. Untuk melakukan ini, kita perlu membuat agar saat mengetik, state kita berubah menjadi nilai input saat ini.

Pertama, untuk ini kita perlu menambahkan event onChange ke input:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Event ini di React berperilaku berbeda dibandingkan dengan JS murni. Di React event ini terpicu segera saat input berubah. Artinya saat mengetik atau menghapus karakter.

Sekarang mari tambahkan handler untuk event kita:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Dalam handler ini, kita harus membaca teks saat ini dari input dan mengaturnya ke state menggunakan fungsi setValue.

Masalahnya adalah, this dari fungsi ini tidak akan menunjuk ke input kita - itulah karakteristik React. Untuk mendapatkan elemen tempat event terjadi, kita perlu menggunakan event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // referensi ke elemen DOM input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Mari tampilkan teks input saat ini menggunakan event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // teks input saat ini
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Dan sekarang mari tulis teks input ke state kita:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Sekarang kita dapat memasukkan teks ke input. Pada saat yang sama, state value akan selalu berisi teks input saat ini.

Kita dapat dengan mudah memverifikasi ini. Mari tampilkan isi teks kita ke dalam paragraf. Dalam hal ini, saat teks dimasukkan ke input, teks yang dimasukkan akan secara otomatis muncul di paragraf:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

Kita dapat menulis ulang ke versi yang lebih ringkas dengan fungsi panah anonim:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

Jadi, untuk kerja setiap input, kita membutuhkan hal berikut: buat state untuk input tersebut, ikat state ke atribut value input, pasang event onChange pada input, dalam handler event, ubah state input menjadi teksnya.

Operasi ini perlu dilakukan untuk setiap input. Artinya, jika Anda memiliki dua input, maka Anda akan memiliki dua state dan dua fungsi handler event onChange.

Buatlah dua input. Biarkan teks dari input pertama ditampilkan di paragraf pertama, dan teks input kedua - di paragraf kedua.