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 оқиғасының екі өңдегіш функциясы болады.

Екі енгізу жасаңыз. Бірінші енгізу мәні бірінші абзацта, ал екінші енгізу мәні екінші абзацта шығарылсын.