Ինփութների հետ աշխատանքը 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>տեքստ: {value}</p>
	</div>;
}

Կարող ենք վերագրել ավելի կոմպակտ տարբերակի անանուն սլաքային ֆունկցիայով։

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

Այսպիսով, ցանկացած ինփութի աշխատանքի համար մեզ անհրաժեշտ է հետևյալը․ ստեղծել սթեյթ այդ ինփութի համար, կապել սթեյթը ինփութի value ատրիբուտին, կցել onChange իրադարձությունը ինփութին, իրադարձության մշակիչում փոխել ինփութի սթեյթը նրա տեքստի վրա։

Այս գործողությունները անհրաժեշտ է կատարել յուրաքանչյուր ինփութի հետ։ Այսինքն, եթե ունեք երկու ինփութ, ապա ձեզ մոտ կլինի երկու սթեյթ և երկու ֆունկցիա-մշակիչ onChange իրադարձության։

Կատարեք երկու ինփութ։ Թող առաջին ինփութի տեքստը արտածվի առաջին պարբերությունում, իսկ երկրորդ ինփութի տեքստը՝ երկրորդ պարբերությունում։