Ngritja e Gjendjes në React

Shpesh disa komponentë duhet të reflektojnë të njëjtat të dhëna në ndryshim. Në React rekomandohet të ngrihet gjendja e përbashkët deri te prindi më i afërt i përbashkët. Le të shohim në një shembull.

Le të themi që duam të bëjmë një kalkulator të temperaturës së ujit. Ai do të përfaqësojë një input, ku përdoruesi do të fusë temperaturën, dhe një paragraf, ku do të shfaqet vendimi: uji është i lëngët, uji është i ngurtë, uji është i gaztë.

Le të themi që kalkulatori ynë përfaqëson një kontejner-komponent Calculator:

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

Le të nxjerrim input-in për futjen e temperaturës në komponentin TempInp, dhe paragrafin me vendimin - në komponentin Verdict:

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

Është e lehtë të kuptohet se si TempInp, ashtu edhe Verdict duhet të kenë gjendje me temperaturën. Në të njëjtën kohë është logjike, që kjo duhet të jetë e njëjta temperaturë: ndërsa të dhënat futen në input, duhet të shfaqet vendimi.

Në një rast të tillë rekomandohet të përdoret një metodë, e quajtur ngritja e gjendjes: gjendja, e përbashkët për dy (ose më shumë) komponentë ngrihet lart deri te prindi i tyre i përbashkët.

Në rastin tonë do të rezultojë, që gjendja me temperaturën duhet t'i përkasë komponentit Calculator, i cili do ta transmetojë atë në TempInp dhe Verdict si prope:

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

Në komponentin TempInp duhet të ketë një input për ndryshimin e temperaturës. Por, meqenëse kjo temperaturë është një prop i këtij komponenti, atëherë direkt në TempInp nuk mund ta ndryshojmë atë. Do të ishte e saktë të transmetohet nga komponenti Calculator një funksion i veçantë për ndryshimin e temperaturës:

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>;
}

Mund, meqë ra fjala, të mos futet një funksion i ri, por të transmetohet në komponentin fëmijë funksioni setTemp:

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

Shkruani implementimin e komponentëve TempInp dhe Verdict.

Ktheni me mend 3 detyra, ku duhet të përdoret ngritja e gjendjes. Shkruani zgjidhjet e këtyre detyrave.