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 стейти өзгөрбөйт, демек, инпуттун тексти да өзгөрбөшү керек.

Өзүңүз аракет кылып көрүңүз. Менин кодумду көчүрүп алып, өзүңүздүн компьютериңизде иштетиңиз. Инпутта текстти өзгөртүүгө аракет кылыңыз - сизге иш чыкпайт. Браузердин консолун ачыңыз - сиз анда Reactтин эскертүүсүн көрөсүз. Бул эскертүү бизге инпутка стейт байланыштырылганын, бирок инпут ушундайча блоголгонун көрсөтөт.

Эми биздин инпутка текст жазса болот кылалы. Бул үчүн, текст жазылганда биздин стейт инпуттун учурдагы маанисине өзгөрүшү керек.

Алгач, бул үчүн инпутка 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 функциясын колдонуп стейтке коюшубуз керек.

Кыйынчылык, бул функциянын 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>;
}

Биз анонимдик жебе функциясы менен кыскартылган вариантка кайра жаза алабыз:

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 окуясынын эки иштетүүчү функциясы болот.

Эки инпут жасаңыз. Биринчи инпуттун тексти биринчи абзацка, экинчи инпуттун тексти экинчи абзацка чыксын.