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

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

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

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

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

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

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

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