React හි ආදාන ක්‍රියාකරණය

React හි ආදාන ක්‍රියාකරණය සිදුවන්නේ state භාවිතයෙන්. සෑම ආදානයකටම එහි value අඩංගු කරන state එකක් නියම කර ඇත.

අපි උදාහරණයක් බලමු. අපට ආදානයක් ඇතැයි සිතමු:

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

අපට state එකක් ද ඇතැයි සිතමු:

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

අපි ආදානයේ value ගුණාංගයට අපගේ state බැඳීම සිදු කරමු:

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

මෙම අවස්ථාවේදී, state වෙනස් වන විට, ආදානයේ පෙළද සක්‍රිය ලෙස වෙනස් වේ.

කෙසේ වෙතත්, මෙය රසවත් පාර්ශ්වීය බලපෑමක් ගෙන දේ: දැන් කේතය බ්‍රවුසරයේ දිව්ව පසු ආදානයේ පෙළ වෙනස් කළ නොහැක! හේතුව: මන්දයත් ආදානයේ පෙළ ඇතුළත් කිරීමේදී state value වෙනස් නොවේ, ඒ අනුව, ආදානයේ පෙළ වෙනස් නොවිය යුතුය.

ඔබම උත්සාහ කරන්න. මගේ කේතය පිටපත් කර ඔබේ පරිගණකයේ ධාවනය කරන්න. ආදානයේ පෙළ වෙනස් කිරීමට උත්සාහ කරන්න - ඔබට කිසිවක් සිදු කළ නොහැකි වනු ඇත. බ්‍රවුසරයේ කොන්සෝලය විවෘත කරන්න - ඔබ එහි React අනතුරු ඇඟවීමක් දකිනු ඇත. මෙම අනතුරු ඇඟවීම අපට දක්වන්නේ, අපි state ආදානයකට බැඳ ඇති නමුත් එමගින් ආදානය අවහිර කර ඇති බවයි.

අපි එය එසේ කර අපගේ ආදානයට පෙළ ඇතුළත් කළ හැකි වන පරිදි සකසමු. මේ සඳහා කළ යුත්තේ ඇතුළත් කිරීමේදී අපගේ state ආදානයේ වර්තමාන අගයට වෙනස් වන පරිදිය.

ආරම්භ කිරීම සඳහා මේ සඳහා ආදානයට 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>;
}

මෙම හසුකරුවෙන් අපි වත්මන් ආදාන පෙළ කියවා එය state තුළට ස්ථාපනය කළ යුතුය 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>;
}

දැන් ආදාන පෙළ අපගේ state තුළට ලියා තබමු:

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

දැන් අපට ආදානයට පෙළ ඇතුළත් කළ හැකිය. මෙම අවස්ථාවේදී state 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>;
}

එබැවින්, ඕනෑම ආදාන ක්‍රියාකාරිත්වයක් සඳහා අපට පහත සඳහන් දෑ අවශ්‍ය වේ: මේ සඳහා state එකක් සාදන්න ආදානය, state ආදානයේ value ගුණාංගයට බැඳීම, onChange සිදුවීම ආදානයට යෙදීම, සිදුවීමේ හසුකරුවෙන් ආදානයේ state වෙනස් කිරීම එහි පෙළට.

මෙම ක්‍රියාවලින් සෑම ආදානයක් සමඟම සිදු කළ යුතුය. එනම්, ඔබට ආදාන දෙකක් තිබේ නම්, එවිට ඔබට state දෙකක් සහ හසුකරු ශ්‍රිත දෙකක් ඇත onChange සිදුවීමේ.

ආදාන දෙකක් සාදන්න. පළමු ආදානයේ පෙළ පළමු ඡේදයට ප්‍රතිදානය වන අතර, දෙවන ආදානයේ පෙළ දෙවන ඡේදයට ප්‍රතිදානය වේවා.