Reactda Inputlar bilan ishlash

Reactda inputlar bilan ishlash state lar yordamida amalga oshiriladi. Har bir inputga o'zining state i belgilanadi, u inputning value ini o'z ichiga oladi.

Keling, buni misolda ko'rib chiqaylik. Faraz qilaylik, bizda input bor:

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

Faraz qilaylik, shuningdek, bizda state bor:

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

Keling, inputning value atributiga state imizni bog'laymiz:

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

Bunday holatda, state o'zgarganda, input matni ham reaktiv ravishda o'zgaradi.

Biroq, bu qiziq side effect beradi: endi brauzerda kodni ishga tushirganda inputda matnni o'zgartirishning iloji yo'q! Nima uchun: chunki inputga matn kiritilganda value state i o'zgarmaydi, shuning uchun ham inputdagi matn o'zgarishi shart emas.

O'zingiz sinab ko'ring. Mening kodimni nusxalab oling va o'zingizda ishga tushiring. Inputdagi matnni o'zgartirishga harakat qiling - hech narsa ishlamaydi. Brauzer konsolini oching - siz u erda Reactning ogohlantirishini ko'rasiz. Bu ogohlantirish bizga state ni inputga bog'laganimizni, ammo shu orqali inputni bloklaganimizni ko'rsatadi.

Keling, inputimizga matn kiritishimiz mumkin bo'ladigan qilaylik. Buning uchun matn kiritilganda bizning state imiz inputning joriy qiymatiga o'zgartirilishi kerak.

Boshlash uchun buning uchun inputga onChange hodisasini o'rnatishimiz kerak:

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

Ushbu hodisa Reactda sof JS ga nisbatan boshqacha ishlaydi. Reactda u input o'zgargach darhol ishga tushadi. Ya'ni belgi kiritilganda yoki o'chirilganda.

Keling, endi hodisamizning ishlovchisini qo'shamiz:

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

Ushbu ishlovchida biz inputning joriy matnini o'qib olishimiz va uni setValue funksiyasi yordamida state ga o'rnatishimiz kerak.

Muammo shundaki, ushbu funksiyaning this i bizning inputimizga ishora qilmaydi - bu Reactning o'ziga xos xususiyati. Elementni olish uchun biz event.target dan foydalanishimiz kerak:

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

Keling, event.target yordamida inputning joriy matnini chiqaramiz:

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

Keling, endi input matnini state imizga yozamiz:

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

Endi biz inputga matn kiritishimiz mumkin. Bunda value state i har doim inputning joriy matnini o'z ichiga oladi.

Bunga osongina ishonch hosil qilishimiz mumkin. Matnimizning tarkibini abzasga chiqaramiz. Bunda inputga matn kiritilganda kiritilgan matn avtomatik ravishda abzada paydo bo'ladi:

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

Biz buni anonim arrow funksiya yordamida yanada ixchamroq variantga qayta yozishimiz mumkin:

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

Shunday qilib, har qanday input bilan ishlash uchun bizga quyidagilar kerak: ushbu input uchun state yaratish, state ni inputning value atributiga bog'lash, inputga onChange hodisasini o'rnatish, hodisa ishlovchisida input state ini uning matniga o'zgartirish.

Ushbu amallar har bir input bilan bajarilishi kerak. Ya'ni, agar sizda ikkita input bo'lsa, sizda ikkita state va ikkita onChange hodisasi ishlovchi funksiyasi bo'ladi.

Ikkita input qiling. Birinchi input matni birinchi abzada, ikkinchi input matni esa ikkinchi abzada chiqsin.