Olekute tõstmine Reactis

Sageli peavad mitu komponenti kajastama samu muutuvaid andmeid. Reactis soovitatakse tõsta ühine olek lähima ühise esivanema juurde. Vaatame seda näite varal.

Oletame, et tahame teha vee temperatuuri kalkulaatori. See koosneb sisendväljast, kuhu kasutaja sisestab temperatuuri, ja lõigust, kus kuvatakse järeldus: vesi on vedel, vesi on tahke, vesi on gaasiline.

Oletame, et meie kalkulaator on konteinerkomponent Calculator:

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

Eraldame temperatuuri sisestamise välja komponenti TempInp ja järelduse lõigu - komponenti Verdict:

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

On lihtne mõista, et nii TempInp kui ka Verdict peavad omama temperatuuri olekut. Samas on loogiline, et see peaks olema sama temperatuur: andmete sisestamisel väljale peaks kuvatama järeldus.

Sellisel juhul soovitatakse kasutada võtet, mida nimetatakse oleku tõstmiseks: olek, mis on ühine kahele (või enamale) komponendile, tõstetakse üles nende ühise vanema juurde.

Meie puhul selgub, et temperatuuri olek peaks kuuluma komponendile Calculator, mis edastab selle TempInp ja Verdict komponentidele propsidena:

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

Komponendis TempInp peaks olema sisendväli temperatuuri muutmiseks. Kuid kuna see temperatuur on selle komponendi props, siis otse TempInp komponendis ei saa seda muuta. Õige oleks komponendist Calculator edastada spetsiaalne funktsioon temperatuuri muutmiseks:

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

Muide, võib mitte kasutusele võtta uut funktsiooni, vaid edastada alamkomponendile funktsiooni setTemp:

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

Kirjutage komponentide TempInp ja Verdict implementatsioon.

Mõelge välja 3 ülesannet, kus on vaja kasutada oleku tõstmist. Kirjutage nende ülesannete lahendused.