React හි state උස්කිරීම

බොහෝ විට සංරචක කිහිපයක් එකම වෙනස් වන දත්ත පිළිබිඹු කළ යුතුය. React හි නිර්දේශ කරනු ලබන්නේ සමාජයීය state ආසන්නතම පොදු පූර්වපුරුෂයා වෙත ඔසවා තැබීමයි. අපි උදාහරණයක් බලමු.

අපි ජලයේ උෂ්ණත්වය ගණනය කරන යන්ත්‍රයක් සෑදීමට අවශ්‍ය යැයි සිතමු. එයට input field එකක් සහ විනිශ්චය ප්‍රතිදානය කරන ඡේදයක් ඇතුළත් වනු ඇත: ජලය දියර, ජලය ඝන, ජලය වායුමය.

අපගේ ගණක යන්ත්‍රය Calculator නම් සංරචක-පෙට්ටිය නියෝජනය කරයි යැයි සිතමු:

function Calculator() {
	return <div>
		
	</div>;
}

උෂ්ණත්වය ඇතුළත් කිරීම සඳහා input field එක TempInp සංරචකයට ද, විනිශ්චය සහිත ඡේදය Verdict සංරචකයට ද ඉවත් කරමු:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

TempInp සහ Verdict යන දෙකම උෂ්ණත්වය සහිත state එකක් තිබිය යුතු බව තේරුම් ගැනීම පහසුය. මෙම අවස්ථාවේදී, එය එකම උෂ්ණත්වය විය යුතු බව තර්කානුකූල ය: input field එකට දත්ත ඇතුළත් කරන විට විනිශ්චය ප්‍රදර්ශනය කළ යුතුය.

එවැනි අවස්ථාවන්හිදී, state උස්කිරීම ලෙස හැඳින්වෙන තාක්ෂණය භාවිතා කිරීම නිර්දේශ කෙරේ: සංරචක දෙකකට (හෝ තවත්) පොදු state එක ඔවුන්ගේ පොදු මව්පියා තෙක් ඉහළට ඔසවනු ලැබේ.

අපගේ නඩුවේදී, උෂ්ණත්වය සහිත state එක Calculator සංරචකයට අයත් වන අතර, එය props ලෙස TempInp සහ Verdict වෙත සම්ප්‍රේෂණය කරනු ඇත:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

TempInp සංරචකයේ උෂ්ණත්වය වෙනස් කිරීම සඳහා input field එකක් තිබිය යුතුය. නමුත්, මෙම උෂ්ණත්වය මෙම සංරචකයේ prop එකක් වන බැවින්, හරියටම TempInp හි එය වෙනස් කළ නොහැක. Calculator සංරචකයෙන් උෂ්ණත්වය වෙනස් කිරීම සඳහා විශේෂ ශ්‍රිතයක් සම්ප්‍රේෂණය කිරීම නිවැරදිය:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

පැවසිය හැකිය, නව ශ්‍රිතයක් හඳුන්වා නොදී, උප සංරචකයට setTemp ශ්‍රිතය සම්ප්‍රේෂණය කළ හැකිය:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

TempInp සහ Verdict සංරචකවල ක්‍රියාත්මක කිරීම ලියන්න.

state උස්කිරීම භාවිතා කළ යුතු ගැටලු 3 ක් සිතා ගන්න. මෙම ගැටලුවලට විසඳුම් ලියන්න.