Pengangkatan State dalam React

Sering kali beberapa komponen perlu memaparkan data yang sama yang berubah-ubah. Dalam React, adalah disyorkan untuk mengangkat state yang dikongsi kepada induk bersama yang terdekat. Mari kita lihat satu contoh.

Katakan kita ingin membuat kalkulator suhu air. Ia akan terdiri daripada input, di mana pengguna akan memasukkan suhu, dan perenggan, di mana keputusan akan dipaparkan: air adalah cecair, air adalah pepejal, air adalah gas.

Katakan kalkulator kami diwakili oleh komponen kontena Calculator:

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

Mari asingkan input untuk memasukkan suhu ke dalam komponen TempInp, dan perenggan dengan keputusan - ke dalam komponen Verdict:

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

Mudah untuk memahami bahawa kedua-dua TempInp dan Verdict harus mempunyai state untuk suhu. Pada masa yang sama, adalah logik bahawa ini sepatutnya suhu yang sama: apabila data dimasukkan ke dalam input, keputusan harus dipaparkan.

Dalam kes ini, adalah disyorkan untuk menggunakan teknik yang dipanggil pengangkatan state: state, yang dikongsi oleh dua (atau lebih) komponen dinaikkan ke atas kepada induk bersama mereka.

Dalam kes kami, ini bermakna state untuk suhu harus dimiliki oleh komponen Calculator, yang akan menghantarnya kepada TempInp dan Verdict sebagai props:

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

Dalam komponen TempInp, harus ada input untuk mengubah suhu. Tetapi, oleh kerana suhu ini adalah props bagi komponen ini, maka secara langsung dalam TempInp, ia tidak boleh diubah. Cara yang betul adalah dengan menghantar dari komponen Calculator fungsi khas untuk mengubah suhu:

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

Boleh juga, dengan cara, tidak memperkenalkan fungsi baru, tetapi menghantar fungsi setTemp kepada komponen anak:

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

Tulis pelaksanaan komponen TempInp dan Verdict.

Cari 3 masalah yang memerlukan penggunaan pengangkatan state. Tulis penyelesaian masalah-masalah tersebut.