Nâng cấp trạng thái trong React

Thường thì nhiều component cần phản ánh cùng một dữ liệu thay đổi. Trong React, khuyến nghị là nâng trạng thái chung lên component cha gần nhất. Hãy cùng xem xét qua một ví dụ.

Giả sử chúng ta muốn tạo một máy tính nhiệt độ nước. Nó sẽ bao gồm một ô nhập liệu, nơi người dùng nhập nhiệt độ, và một đoạn văn, nơi sẽ đưa ra kết luận: nước ở thể lỏng, nước ở thể rắn, nước ở thể khí.

Giả sử máy tính của chúng ta là một component chứa Calculator:

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

Hãy tách ô nhập nhiệt độ thành component TempInp, và đoạn văn với kết luận - thành component Verdict:

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

Dễ dàng hiểu rằng cả TempInp và Verdict đều phải có state lưu nhiệt độ. Đồng thời, logic cho thấy, đây phải là cùng một nhiệt độ: khi dữ liệu được nhập vào ô nhập liệu thì kết luận phải được hiển thị.

Trong trường hợp như vậy, khuyến nghị sử dụng kỹ thuật được gọi là nâng cấp trạng thái: trạng thái chung cho hai (hoặc nhiều) component được nâng lên component cha chung của chúng.

Trong trường hợp của chúng ta, kết quả là state nhiệt độ sẽ thuộc về component Calculator, component này sẽ truyền nó xuống TempInp và Verdict dưới dạng props:

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

Trong component TempInp phải có một ô nhập liệu để thay đổi nhiệt độ. Nhưng, vì nhiệt độ này là prop của component này, nên không thể thay đổi trực tiếp nó trong TempInp. Đúng hơn là phải truyền từ component Calculator một hàm đặc biệt để thay đổi nhiệt độ:

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

Nhân tiện, có thể không cần tạo hàm mới, mà truyền hàm setTemp xuống component con:

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

Hãy viết mã triển khai cho các component TempInp và Verdict.

Nghĩ ra 3 bài toán mà cần sử dụng nâng cấp trạng thái. Hãy viết lời giải cho các bài toán đó.