Reactда инпутлар билан ишлаш

Reactда инпутлар билан ишлаш стейтлар ёрдамида амалга оширилади. Ҳар бир инпутга унинг value қийматини ўз ичига олган алохйда стейт белгиланади.

Келгила, мисолда кўрамиз. Бизда инпут бор дейлик:

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

Бундан ташқари бизда стейт ҳам бор дейлик:

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

Келгила, инпутнинг value атрибутига бизнинг стейтни боглаймиз:

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

Бундай ҳолда, стейт ўзгарганида, инпутнинг мати ҳам реактив равишда ўзгаради.

Бирок, бу қизиқ иккинчи даражали таъсир келтиради: энди браузерда кодни ишлатганда инпутдаги матни ўзгартириб бўлмайди! Нега: чунки инпутга мат киритганда value стейти ўзгармайди, шу sababli, инпутдаги мат ҳам ўзгармаслиги керак.

Ўзингиз синаб кўринг. Менинг кодимни нусхалаб ўзингизда ишланг. Инпутдаги матни ўзгартиришга уриниб кўринг - ҳеч нарса бўлмайди. Браузер консолини очинг - унда сиз Reactнинг огоҳлантиришини кўрасиз. Бу огоҳлантириш бизга стейтни инпутга боглаганимиз, аммо шу билан инпутни блоклаганлигимизни кўрсатади.

Келгила, бизнинг инпутимизга мат киритиш имкони бўлсин учун шундай қилайликки, киритish пайтида бизнинг стейтимиз инпутнинг жорий қийматига ўзгарсин.

Бошлаш учун инпутга onChange воқеасини боглаш керак:

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

Бу воқеа Reactда соф JSга нисбатан бошқача туради. Reactда у инпут ўзгарганида дарҳол ишга тушади. Яъни белги киритилганда ёки ўчирилганда.

Келгила, энди воқеа обработчигимизни қўшайлик:

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

Бу обработчикда биз инпутнинг жорий матини ўқишимиз ва уни setValue функциasi ёрдамида стейтга ўрнатишимиз керак.

Муаммо шундаки, бу функциaning this бизнинг инпутимизга ишора қилмайди - бу Reactнинг ўзига хос хусусияти. Элементни олиш учун, воқеа юз берган, биз event.target дан фойдаланишимиз керак:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // инпут DOM элементга ишора
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

event.target ёрдамида инпутнинг жорий матини чиқарайлик:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // инпутнинг жорий мати
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Энди инпут матини бизнинг стейтимизга ёзайлик:

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

Энди биз инпутга мат кирита оламиз. Бу пайтда value стейти ҳар доим инпутнинг жорий матини ўз ичига олади.

Биз бунга осонгина ишонч ҳосил қиламиз. Матнинг мундарижасини абзацга чиқарайлик. Бу ҳолда инпутга мат киритганда, киритилган мат автоматик равишда абзацда пайдо бўлади:

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>;
}

Биз уни номсиз стрелка функциasi билан анча қисқароқ қилиб ёза оламиз:

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

Шу тариқа, ҳар қандай инпут билан ишлаш учун бизга куйидагилар керак: ушбу инпут учун стейт яратиш, стейтни инпутнинг value атрибутига боглаш, инпутга onChange воқеасини боглаш, воқеа обработчигида инпут стейтини унинг матига ўзгартириш.

Бу амалиётлар ҳар бир инпут билан бажарилиши керак. Яъни, агар сизда иккита инпут бўлса, сизда иккита стейт ва onChange воқеаси учун иккита функция-обработчик бўлади.

Иккита инпут яратинг. Биринчи инпутнинг мати биринчи абзацда, иккинчи инпутнинг мати эса иккинчи абзацда чиқсин.