Xử lý sự kiện toàn cục thông qua useEffect trong React

Giả sử bây giờ chúng ta muốn màu sắc thay đổi không chỉ khi click vào nút, mà còn khi nhấn phím Enter trên bàn phím. Trong React thông thường, việc lắng nghe đối tượng toàn cục window bằng cách sử dụng addEventListener là không thể. Để làm điều này, chúng ta có các hiệu ứng. Hãy thêm hành động này bằng cách sử dụng useEffect.

Hãy viết hàm xử lý cho sự kiện nhấn phím Enter. Giả sử màu sắc trong trường hợp này sẽ đổi thành màu đỏ:

function handleEnter(event) {
	if (event.keyCode === 13) {
		setColor('red');
	}
}

Bây giờ hãy liên kết việc lắng nghe sự kiện với window trong hook useEffect:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
}, [color]);

Nếu chúng ta có một hàm cài đặt nào đó, thì luôn cần phải trả về mã dọn dẹp hoặc hủy đăng ký trong useEffect để tránh các vấn đề sau này. Trong trường hợp này, sau khi đính kèm addEventListener, chúng ta cần trả về việc xóa nó:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
	
	return () => {
		window.removeEventListener('keydown', handleEnter);
	};
}, [color]);

Cho một component. Hãy làm sao để khi click vào bất kỳ vị trí nào trên trang, nền của component này sẽ đổi màu.

Tạo một liên kết, khi nhấp vào đó sẽ hiển thị một khối. Hãy làm sao để khi nhấp vào bất kỳ vị trí nào trong cửa sổ trình duyệt, khối của chúng ta sẽ bị ẩn đi.