การจัดการตัวจัดการเหตุการณ์ระดับโลกผ่าน useEffect ใน React

สมมติว่าตอนนี้เราต้องการให้ สีเปลี่ยนไม่เฉพาะเมื่อคลิก ที่ปุ่มเท่านั้น แต่ยังเปลี่ยนเมื่อกด Enter บนแป้นพิมพ์อีกด้วย ในชีวิตปกติของ React เราไม่สามารถใช้ addEventListener เพื่อฟังวัตถุระดับโลกอย่าง window ได้ สำหรับสิ่งนี้เรามี Effects มาเพิ่ม การกระทำนี้โดยใช้ useEffect กัน

มาเขียนฟังก์ชันตัวจัดการ สำหรับการกด Enter กัน ให้สี เปลี่ยนเป็นสีแดงในกรณีนี้:

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

ทีนี้มาเชื่อมโยงการฟังเหตุการณ์ กับ window ใน Hook useEffect:

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

หากเรามีฟังก์ชันการติดตั้งใดๆ เราจำเป็นต้องส่งคืนโค้ดการทำความสะอาดหรือยกเลิกการสมัครใน useEffect เสมอ เพื่อหลีกเลี่ยงปัญหาในอนาคต ใน กรณีนี้หลังจากการติดตั้ง addEventListener เราต้องส่งคืนการลบ ออก:

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

มีคอมโพเนนต์นี้ จัดการให้เมื่อคลิก ที่ใดก็ได้บนหน้า พื้นหลังของคอมโพเนนต์นี้ เปลี่ยนสี

สร้างลิงก์ เมื่อคลิกที่ลิงก์ จะมีบล็อกปรากฏขึ้น จัดการให้เมื่อคลิก ที่ใดก็ได้ในหน้าต่างเบราว์เซอร์ บล็อกของเราจะถูกซ่อน