Kuinua State katika React

Mara nyingi vijenzi kadhaa vinahitaji kuakisi data sawa inayobadilika. Katika React, inapendekezwa kuinua hali ya kawaida hadi mzazi wa karibu wa pamoja. Hebu tuangalie kwa mfano.

Tuseme tunataka kutengeneza kikokotoo cha joto cha maji. Itakuwa ni kiingizio, ambacho mtumiaji ataingiza joto, na aya, ambayo hitimisho litatolewa: maji ni kioevu, maji ni imara, maji ni gesi.

Tuseme kikokotoo chetu kinawakilisha kijenzi-kichwa Calculator:

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

Tuondoe kiingizio cha kuingiza joto kwenye kijenzi TempInp, na aya yenye hitimisho - kwenye kijenzi Verdict:

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

Ni rahisi kuelewa kuwa TempInp, na Verdict lazima kuwa na state yenye joto. Wakati huo huo, ni mantiki, kwamba hii inapaswa kuwa joto moja: kadiri data inavyoingizwa kwenye kiingizio hitimisho linapaswa kuonyeshwa.

Katika kesi kama hiyo, inapendekezwa kutumia mbinu, inayoitwa kuinua state: hali, ya kawaida kwa vijenzi viwili (au zaidi) inainuliwa hadi kwa mzazi wao wa pamoja.

Katika kesi yetu, itageuka kuwa state yenye joto inapaswa kuwa mali ya kijenzi Calculator, ambayo kitaipeleka kwa TempInp na Verdict kama props:

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

Katika kijenzi TempInp kinapaswa kuwa na kiingizio cha kubadilisha joto. Lakini, kwa kuwa joto hili ni prop ya kijenzi hiki, basi, moja kwa moja katika TempInp kuibadilisha haiwezekani. Ni sahihi kutoka kwenye kijenzi Calculator kupeana kazi maalum kwa kubadilisha joto:

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

Inawezekana, kwa njia, kutowekaanzisha kazi mpya, lakini kupeana kwenye kijenzi cha mtoto kazi setTemp:

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

Andika utekelezaji wa vijenzi TempInp na Verdict.

Fikiria 3 kazi, ambazo zinahitaji kutumia kuinua state. Andika suluhisho za kazi hizi.