Reactda Holatlarni Ko'tarish

Ko'pincha bir nechta komponentlar bir xil o'zgaruvchan ma'lumotlarni aks ettirishi kerak. Reactda umumiy holatni eng yaqin umumiy ajdodga ko'tarish tavsiya etiladi. Keling, bir misolni ko'rib chiqaylik.

Faraz qilaylik, biz suv harorati kalkulyatorini yaratmoqchimiz. U foydalanuvchi haroratni kiritadigan input va qaror chiqadigan paragrafdan iborat bo'ladi: suv suyuq, suv qattiq, suv gaz holatida.

Faraz qilaylik, bizning kalkulyatorimiz Calculator konteyner komponenti hisoblanadi:

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

Kiritilgan harorat uchun inputni TempInp komponentiga, qaror bilan paragrafni esa Verdict komponentiga ajratamiz:

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

TempInp ham, Verdict ham harorat bilan holatga ega bo'lishi kerakligini tushunish oson. Bunda mantiqan, bu bir xil harorat bo'lishi kerak: inputga ma'lumot kiritilishi bilan qaror aks ettirilishi kerak.

Bunday hollarda holatni ko'tarish deb ataladigan usuldan foydalanish tavsiya etiladi: ikki (yoki undan ortiq) komponentlar uchun umumiy holat yuqoriga, ularning umumiy ota-onasiga ko'tariladi.

Bizning holatda, harorat bilan holat Calculator komponentiga tegishli bo'lib, uni TempInp va Verdict komponentlariga props sifatida uzatadi:

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

TempInp komponentida haroratni o'zgartirish uchun input bo'lishi kerak. Ammo, bu harorat ushbu komponentning propsi bo'lgani uchun, to'g'ridan-to'g'ri TempInp da uni o'zgartirish mumkin emas. To'g'ri usuli Calculator komponentidan haroratni o'zgartirish uchun maxsus funktsiyani uzatish bo'ladi:

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

Aytgancha, yangi funktsiyani kiritish shart emas, balki farzand komponentiga setTemp funktsiyasini uzatish mumkin:

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

TempInp va Verdict komponentlarining amalga oshirilishini yozing.

Holatni ko'tarishdan foydalanish kerak bo'lgan 3 topshiriqni o'ylab toping. Ushbu topshiriqlarning yechimlarini yozing.