Būsenos pakėlimas React

Dažnai keli komponentai turi atspindėti tas pačias kintančias duomenis. React rekomenduojama pakelti bendrą būseną iki artimiausio bendro protėvio. Pažiūrėkime pavyzdžiu.

Tarkime, norime padaryti vandens temperatūros skaičiuotuvą. Jis bus įvesties laukas, kuriame vartotojas įves temperatūrą, ir pastraipa, kurioje bus rodoma išvada: vanduo skystas, vanduo kietas, vanduo dujinis.

Tarkime, mūsų skaičiuotuvas yra konteinerinis komponentas Calculator:

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

Išskirkime įvesties lauką temperatūros įvedimui į komponentą TempInp, o pastraipą su išvada - į komponentą Verdict:

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

Lengva suprasti, kad ir TempInp, ir Verdict turi turėti būseną su temperatūra. Tuo pat metu logiška, kad tai turi būti ta pati temperatūra: Kai įvedami duomenys į įvesties lauką, turi rodyti išvadą.

Tokiu atveju rekomenduojama naudoti metodą, vadinamą būsenos pakėlimu: būsena, bendra dviem (ar daugiau) komponentams, pakeliama aukštyn iki jų bendro tėvinio komponento.

Mūsų atveju pasirodys, kad būsena su temperatūra turi priklausyti komponentui Calculator, kuris perduos ją į TempInp ir Verdict kaip propsus:

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

Komponente TempInp turi būti įvesties laukas temperatūros keitimui. Bet, kadangi ši temperatūra yra šio komponento propsas, tai tiesiogiai TempInp jį keisti negalima. Teisinga būtų perduoti iš komponento Calculator specialią funkciją temperatūrai keisti:

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

Galima, beje, neįvesti naujos funkcijos, o perduoti į antrinį komponentą funkciją setTemp:

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

Parašykite komponentų TempInp ir Verdict realizaciją.

Sugalvokite 3 uždavinius, kuriuose reikia naudoti būsenos pakėlimą. Parašykite šių uždavinių sprendimus.