Tilojen nostaminen Reactissa

Usein useiden komponenttien tulee heijastaa samoja muuttuvia tietoja. Reactissa suositellaan yhteisen tilan nostamista lähimpään yhteiseen esi-isään. Katsotaanpa esimerkkiä.

Oletetaan, että haluamme tehdä veden lämpötilan laskurin. Se koostuu syöttökentästä, johon käyttäjä syöttää lämpötilan, ja kappaleesta, johon tulostetaan päätelmä: vesi on nestemäistä, vesi on kiinteää, vesi on kaasumaista.

Oletetaan, että laskurimme on säiliökomponentti Calculator:

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

Erotetaan lämpötilan syöttökenttä komponenttiin TempInp, ja päätelmäkappale - komponenttiin Verdict:

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

On helppo ymmärtää, että sekä TempInp että Verdict tarvitsevat tilan lämpötilalle. Samaan aikaan on loogista, että sen tulisi olla sama lämpötila: kun tietoja syötetään syöttökenttään, päätelmän tulisi näkyä.

Tässä tapauksessa suositellaan käyttämään tekniikkaa, jota kutsutaan tilan nostamiseksi: tila, joka on yhteinen kahdelle (tai useammalle) komponentille, nostetaan ylös niiden yhteiseen vanhempaan.

Meidän tapauksessamme käy niin, että lämpötilatila kuuluu komponentille Calculator, joka välittää sen TempInp:lle ja Verdict:lle propseina:

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

Komponentissa TempInp tulee olla syöttökenttä lämpötilan muuttamiseen. Mutta koska tämä lämpötila on tämän komponentin props, sitä ei voida suoraan muuttaa TempInp:ssä. Oikea tapa on välittää komponentista Calculator erityinen funktio lämpötilan muuttamiseksi:

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

Voit muuten olla ottamatta käyttöön uutta funktiota, vaan välittää lapsikomponenttiin funktion setTemp:

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

Kirjoita komponenttien TempInp ja Verdict toteutus.

Keksi 3 tehtävää, joissa tarvitaan tilan nostamista. Kirjoita näiden tehtävien ratkaisut.