Pengendalian Input dalam React

Pengendalian input dalam React dilakukan dengan menggunakan state. Setiap input diberikan state tersendiri, yang mengandungi value input tersebut.

Mari kita lihat contoh. Katakan kita mempunyai satu input:

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

Katakan juga kita mempunyai state:

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

Mari kita ikat state kita kepada atribut value input:

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

Dalam kes ini, hasilnya ialah apabila state berubah, teks input akan berubah secara reaktif.

Walau bagaimanapun, ini memberikan kesan sampingan yang menarik: sekarang, apabila kod dijalankan dalam pelayar, adalah mustahil untuk menukar teks dalam input! Mengapa: kerana apabila teks dimasukkan ke dalam input, state value tidak berubah, oleh itu, teks dalam input tidak sepatutnya berubah.

Cubalah sendiri. Salin kod saya dan jalankannya di tempat anda. Cuba ubah teks dalam input - anda tidak akan berjaya. Buka konsol pelayar - anda akan melihat amaran dari React di dalamnya. Amaran ini menunjukkan kepada kita bahawa kita telah mengikat state kepada input, tetapi dengan itu menyekat input.

Mari kita buat supaya kita boleh memasukkan teks ke dalam input kita. Untuk ini, kita perlu memastikan bahawa apabila input berubah, state kita turut berubah kepada nilai semasa input.

Sebagai permulaan, kita perlu meletakkan event onChange pada input:

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

Event ini dalam React berkelakuan berbeza berbanding dengan JS tulen. Dalam React, ia terpicu serta-merta apabila input berubah. Iaitu apabila aksara dimasukkan atau dipadam.

Sekarang mari kita tambah pengendali untuk event kita:

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

Dalam pengendali ini, kita perlu membaca teks semasa input dan menetapkannya ke dalam state menggunakan fungsi setValue.

Masalahnya ialah this untuk fungsi ini tidak akan merujuk kepada input kita - itulah ciri React. Untuk mendapatkan elemen di mana event berlaku, kita perlu menggunakan event.target:

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

Mari kita keluarkan teks semasa input menggunakan event.target:

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

Dan sekarang mari kita tulis teks input ke dalam state kita:

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

Sekarang kita boleh memasukkan teks ke dalam input. Pada masa yang sama, state value akan sentiasa mengandungi teks semasa input.

Kita boleh membuktikannya dengan mudah. Mari kita keluarkan kandungan teks kita ke dalam perenggan. Dalam kes ini, apabila teks dimasukkan ke dalam input, teks yang dimasukkan akan muncul secara automatik dalam perenggan:

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

Kita boleh menulis semula kepada versi yang lebih ringkas dengan fungsi anak panah tanpa nama:

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

Oleh itu, untuk mana-mana input berfungsi, kita perlu yang berikut: buat state untuk input tersebut, ikat state kepada atribut value input, letakkan event onChange pada input, dalam pengendali event, ubah state input kepada teksnya.

Operasi ini perlu dilakukan untuk setiap input. Iaitu, jika anda mempunyai dua input, maka anda akan mempunyai dua state dan dua fungsi pengendali event onChange.

Buat dua input. Biarkan teks input pertama dikeluarkan dalam perenggan pertama, dan teks input kedua - dalam perenggan kedua.