การดักจับ Event ใน React Portal: การสกัดกั้น Event ข้าม Portal

React Portals เป็นกลไกที่ทรงพลังสำหรับการเรนเดอร์ children ไปยัง DOM node ที่อยู่นอกลำดับชั้น DOM ของ component แม่ ซึ่งมีประโยชน์อย่างยิ่งสำหรับ modals, tooltips และองค์ประกอบ UI อื่นๆ ที่ต้องการหลุดออกจากขอบเขตของ container แม่ อย่างไรก็ตาม สิ่งนี้ก็นำมาซึ่งความซับซ้อนในการจัดการกับ event โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการสกัดกั้นหรือดักจับ event ที่เกิดขึ้นภายใน portal แต่มีเป้าหมายไปยัง element ที่อยู่ภายนอก บทความนี้จะสำรวจความซับซ้อนเหล่านี้และนำเสนอแนวทางแก้ไขที่ใช้งานได้จริงสำหรับการสกัดกั้น event ข้าม portal

ทำความเข้าใจ React Portals

ก่อนที่จะลงลึกเรื่องการดักจับ event เรามาทำความเข้าใจเกี่ยวกับ React Portals ให้ชัดเจนกันก่อน Portal ช่วยให้คุณสามารถเรนเดอร์ child component ไปยังส่วนอื่นของ DOM ได้ ลองจินตนาการว่าคุณมี component ที่ซ้อนกันอยู่ลึกๆ และต้องการเรนเดอร์ modal โดยตรงภายใต้ element `body` หากไม่มี portal ตัว modal จะต้องอยู่ภายใต้การจัดสไตล์และการวางตำแหน่งของบรรพบุรุษของมัน ซึ่งอาจนำไปสู่ปัญหาด้าน layout ได้ Portal จะหลีกเลี่ยงปัญหานี้โดยการวาง modal ไปยังตำแหน่งที่คุณต้องการโดยตรง

รูปแบบคำสั่งพื้นฐานสำหรับการสร้าง portal คือ:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

ในที่นี้ `child` คือ React element (หรือ component) ที่คุณต้องการเรนเดอร์ และ `domNode` คือ DOM node ที่คุณต้องการเรนเดอร์ไป

ตัวอย่าง:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Handle case where modal-root doesn't exist

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ `Modal` component จะเรนเดอร์ children ของมันไปยัง DOM node ที่มี ID `modal-root` โดย `onClick` handler บน `.modal-overlay` ช่วยให้สามารถปิด modal ได้เมื่อคลิกนอกพื้นที่ content ในขณะที่ `e.stopPropagation()` จะป้องกันไม่ให้การคลิกที่ overlay ปิด modal เมื่อมีการคลิกที่ content

ความท้าทายในการจัดการ Event ข้าม Portal

แม้ว่า portal จะช่วยแก้ปัญหาด้าน layout แต่ก็นำมาซึ่งความท้าทายในการจัดการกับ event โดยเฉพาะอย่างยิ่ง กลไก event bubbling มาตรฐานใน DOM อาจทำงานผิดปกติเมื่อ event เกิดขึ้นภายใน portal

สถานการณ์: ลองพิจารณาสถานการณ์ที่คุณมีปุ่มอยู่ภายใน portal และคุณต้องการติดตามการคลิกที่ปุ่มนั้นจาก component ที่อยู่สูงขึ้นไปใน React tree (แต่*อยู่ข้างนอก*ตำแหน่งที่ portal เรนเดอร์) เนื่องจาก portal ทำลายลำดับชั้นของ DOM ทำให้ event อาจไม่ bubble ขึ้นไปยัง component แม่ที่คาดไว้ใน React tree

ประเด็นสำคัญ:

• Event Bubbling: Event จะแพร่กระจายขึ้นไปตาม DOM tree แต่ portal สร้างความไม่ต่อเนื่องใน tree นั้น Event จะ bubble ขึ้นไปตามลำดับชั้นของ DOM *ภายใน* node ปลายทางของ portal แต่ไม่จำเป็นต้องย้อนกลับขึ้นไปยัง React component ที่สร้าง portal
• `stopPropagation()`: แม้จะมีประโยชน์ในหลายกรณี แต่การใช้ `stopPropagation()` อย่างไม่ระมัดระวังอาจขัดขวางไม่ให้ event ไปถึง listener ที่จำเป็น รวมถึง listener ที่อยู่นอก portal ด้วย
• Event Target: คุณสมบัติ `event.target` ยังคงชี้ไปยัง DOM element ที่เป็นต้นกำเนิดของ event แม้ว่า element นั้นจะอยู่ภายใน portal ก็ตาม

กลยุทธ์สำหรับการสกัดกั้น Event ข้าม Portal

มีหลายกลยุทธ์ที่สามารถนำมาใช้เพื่อจัดการกับ event ที่เกิดขึ้นภายใน portal และส่งไปถึง component ที่อยู่ภายนอกได้:

1. Event Delegation

Event delegation คือการแนบ event listener เพียงตัวเดียวเข้ากับ element แม่ (ซึ่งมักจะเป็น document หรือบรรพบุรุษร่วม) แล้วจึงตรวจสอบเป้าหมายที่แท้จริงของ event วิธีนี้ช่วยหลีกเลี่ยงการแนบ event listener จำนวนมากเข้ากับแต่ละ element ซึ่งช่วยปรับปรุงประสิทธิภาพและทำให้การจัดการ event ง่ายขึ้น

วิธีการทำงาน:

1. แนบ event listener เข้ากับบรรพบุรุษร่วม (เช่น `document.body`)
2. ใน event listener ให้ตรวจสอบคุณสมบัติ `event.target` เพื่อระบุ element ที่ทำให้เกิด event
3. ดำเนินการตามที่ต้องการโดยอิงจาก event target

ตัวอย่าง:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Button inside portal clicked!', event.target);
        // Perform actions based on the clicked button
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>This is a component outside the portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ `PortalAwareComponent` จะแนบ click listener เข้ากับ `document.body` โดย listener จะตรวจสอบว่า element ที่ถูกคลิกมี class `portal-button` หรือไม่ ถ้ามี ก็จะแสดงข้อความใน console และดำเนินการอื่นๆ ที่จำเป็น วิธีนี้ใช้ได้ผลไม่ว่าปุ่มจะอยู่ภายในหรือภายนอก portal

ข้อดี:

• ประสิทธิภาพ: ลดจำนวน event listener
• ความเรียบง่าย: รวมศูนย์ตรรกะการจัดการ event
• ความยืดหยุ่น: จัดการ event จาก element ที่เพิ่มเข้ามาแบบไดนามิกได้อย่างง่ายดาย

ข้อควรพิจารณา:

• ความเฉพาะเจาะจง: ต้องกำหนดเป้าหมายของต้นกำเนิด event อย่างระมัดระวังโดยใช้ `event.target` และอาจต้องไล่ระดับขึ้นไปใน DOM tree โดยใช้ `event.target.closest()`
• ประเภทของ Event: เหมาะสมที่สุดสำหรับ event ที่มีคุณสมบัติ bubble

2. การส่ง Custom Event (Custom Event Dispatching)

Custom events ช่วยให้คุณสามารถสร้างและส่ง event ตามโปรแกรมได้ ซึ่งมีประโยชน์เมื่อคุณต้องการสื่อสารระหว่าง component ที่ไม่ได้เชื่อมต่อกันโดยตรงใน React tree หรือเมื่อคุณต้องการทริกเกอร์ event ตามตรรกะที่กำหนดเอง

วิธีการทำงาน:

1. สร้างอ็อบเจกต์ `Event` ใหม่โดยใช้ constructor `Event`
2. ส่ง event โดยใช้เมธอด `dispatchEvent` บน DOM element
3. รอรับ custom event โดยใช้ `addEventListener`

ตัวอย่าง:

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Button clicked inside portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ เมื่อปุ่มภายใน portal ถูกคลิก custom event ที่ชื่อว่า `portalButtonClick` จะถูกส่งไปยัง `document` และ `PortalAwareComponent` จะรอรับ event นี้และแสดงข้อความใน console

ข้อดี:

• ความยืดหยุ่น: ช่วยให้สามารถสื่อสารระหว่าง component ได้โดยไม่คำนึงถึงตำแหน่งใน React tree
• การปรับแต่งได้: คุณสามารถใส่ข้อมูลที่กำหนดเองในคุณสมบัติ `detail` ของ event ได้
• การลดความผูกมัด (Decoupling): ลดการพึ่งพาระหว่าง component

ข้อควรพิจารณา:

• การตั้งชื่อ Event: เลือกชื่อ event ที่ไม่ซ้ำใครและสื่อความหมายเพื่อหลีกเลี่ยงความขัดแย้ง
• การทำให้ข้อมูลเป็นอนุกรม (Data Serialization): ตรวจสอบให้แน่ใจว่าข้อมูลใดๆ ที่รวมอยู่ในคุณสมบัติ `detail` สามารถทำ serialization ได้
• ขอบเขตส่วนกลาง (Global Scope): Event ที่ส่งไปยัง `document` สามารถเข้าถึงได้ทั่วโลก ซึ่งอาจเป็นได้ทั้งข้อดีและข้อเสีย

3. การใช้ Refs และการจัดการ DOM โดยตรง (โปรดใช้ด้วยความระมัดระวัง)

แม้โดยทั่วไปจะไม่แนะนำในการพัฒนา React แต่การเข้าถึงและจัดการ DOM โดยตรงโดยใช้ refs อาจจำเป็นในบางครั้งสำหรับสถานการณ์การจัดการ event ที่ซับซ้อน อย่างไรก็ตาม สิ่งสำคัญคือต้องลดการจัดการ DOM โดยตรงให้น้อยที่สุดและเลือกใช้วิธีการแบบ declarative ของ React ทุกครั้งที่เป็นไปได้

วิธีการทำงาน:

1. สร้าง ref โดยใช้ `React.createRef()` หรือ `useRef()`
2. แนบ ref เข้ากับ DOM element ภายใน portal
3. เข้าถึง DOM element โดยใช้ `ref.current`
4. แนบ event listener เข้ากับ DOM element โดยตรง

ตัวอย่าง:

            import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked (direct DOM manipulation)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

ในตัวอย่างนี้ ref จะถูกแนบเข้ากับปุ่มภายใน portal จากนั้น event listener จะถูกแนบโดยตรงเข้ากับ DOM element ของปุ่มโดยใช้ `buttonRef.current.addEventListener()` วิธีนี้จะข้ามระบบ event ของ React และให้การควบคุมการจัดการ event โดยตรง

ข้อดี:

• การควบคุมโดยตรง: ให้การควบคุมการจัดการ event อย่างละเอียด
• การข้ามระบบ Event ของ React: อาจมีประโยชน์ในกรณีเฉพาะที่ระบบ event ของ React ไม่เพียงพอ

ข้อควรพิจารณา:

• โอกาสเกิดความขัดแย้ง: อาจนำไปสู่ความขัดแย้งกับระบบ event ของ React หากไม่ได้ใช้อย่างระมัดระวัง
• ความซับซ้อนในการบำรุงรักษา: ทำให้โค้ดยากต่อการบำรุงรักษาและทำความเข้าใจ
• รูปแบบที่ไม่ควรทำ (Anti-Pattern): มักถูกมองว่าเป็น anti-pattern ในการพัฒนา React ควรใช้อย่างจำกัดและเฉพาะเมื่อจำเป็นเท่านั้น

4. การใช้โซลูชันการจัดการ State ร่วมกัน (เช่น Redux, Zustand, Context API)

หาก component ทั้งภายในและภายนอก portal จำเป็นต้องใช้ state ร่วมกันและตอบสนองต่อ event เดียวกัน การใช้โซลูชันการจัดการ state ร่วมกันอาจเป็นแนวทางที่สะอาดและมีประสิทธิภาพ

วิธีการทำงาน:

1. สร้าง state ที่ใช้ร่วมกันโดยใช้ Redux, Zustand หรือ Context API ของ React
2. Component ภายใน portal สามารถส่ง action หรืออัปเดต state ที่ใช้ร่วมกันได้
3. Component ภายนอก portal สามารถติดตาม (subscribe) state ที่ใช้ร่วมกันและตอบสนองต่อการเปลี่ยนแปลงได้

ตัวอย่าง (โดยใช้ React Context API):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>This is a component outside the portal. Button clicked: {buttonClicked ? 'Yes' : 'No'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

ในตัวอย่างนี้ `EventContext` จะให้ state ที่ใช้ร่วมกัน (`buttonClicked`) และ handler (`handleButtonClick`) โดย `PortalContent` component จะเรียก `handleButtonClick` เมื่อปุ่มถูกคลิก และ `PortalAwareComponent` component จะติดตาม state `buttonClicked` และเรนเดอร์ใหม่เมื่อมีการเปลี่ยนแปลง

ข้อดี:

• การจัดการ State แบบรวมศูนย์: ทำให้การจัดการ state และการสื่อสารระหว่าง component ง่ายขึ้น
• การไหลของข้อมูลที่คาดเดาได้: ให้การไหลของข้อมูลที่ชัดเจนและคาดเดาได้
• ความสามารถในการทดสอบ: ทำให้โค้ดง่ายต่อการทดสอบมากขึ้น

ข้อควรพิจารณา:

• ภาระงานที่เพิ่มขึ้น (Overhead): การเพิ่มโซลูชันการจัดการ state อาจเพิ่มภาระงาน โดยเฉพาะสำหรับแอปพลิเคชันที่ไม่ซับซ้อน
• ช่วงการเรียนรู้ (Learning Curve): ต้องเรียนรู้และทำความเข้าใจไลบรารีหรือ API การจัดการ state ที่เลือกใช้

แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดการ Event ข้าม Portal

เมื่อต้องจัดการกับ event ข้าม portal ควรพิจารณาแนวทางปฏิบัติที่ดีที่สุดต่อไปนี้:

• ลดการจัดการ DOM โดยตรง: เลือกใช้วิธีการแบบ declarative ของ React ทุกครั้งที่เป็นไปได้ หลีกเลี่ยงการจัดการ DOM โดยตรงเว้นแต่จะจำเป็นจริงๆ
• ใช้ Event Delegation อย่างชาญฉลาด: Event delegation เป็นเครื่องมือที่ทรงพลัง แต่ต้องแน่ใจว่าได้กำหนดเป้าหมายของต้นกำเนิด event อย่างระมัดระวัง
• พิจารณาใช้ Custom Events: Custom events สามารถให้วิธีการสื่อสารระหว่าง component ที่ยืดหยุ่นและลดการพึ่งพากันได้
• เลือกโซลูชันการจัดการ State ที่เหมาะสม: หาก component จำเป็นต้องใช้ state ร่วมกัน ให้เลือกโซลูชันการจัดการ state ที่เหมาะสมกับความซับซ้อนของแอปพลิเคชันของคุณ
• การทดสอบอย่างละเอียด: ทดสอบตรรกะการจัดการ event ของคุณอย่างละเอียดเพื่อให้แน่ใจว่าทำงานได้ตามที่คาดหวังในทุกสถานการณ์ ให้ความสนใจเป็นพิเศษกับกรณีเฉพาะ (edge cases) และความขัดแย้งที่อาจเกิดขึ้นกับ event listener อื่นๆ
• จัดทำเอกสารสำหรับโค้ดของคุณ: จัดทำเอกสารอธิบายตรรกะการจัดการ event ของคุณอย่างชัดเจน โดยเฉพาะเมื่อใช้เทคนิคที่ซับซ้อนหรือการจัดการ DOM โดยตรง

สรุป

React Portals เป็นวิธีที่ทรงพลังในการจัดการองค์ประกอบ UI ที่ต้องหลุดออกจากขอบเขตของ component แม่ อย่างไรก็ตาม การจัดการ event ข้าม portal จำเป็นต้องมีการพิจารณาอย่างรอบคอบและการใช้เทคนิคที่เหมาะสม โดยการทำความเข้าใจความท้าทายและการใช้กลยุทธ์ต่างๆ เช่น event delegation, custom events และการจัดการ state ร่วมกัน คุณจะสามารถสกัดกั้นและดักจับ event ที่เกิดขึ้นภายใน portal ได้อย่างมีประสิทธิภาพ และทำให้แน่ใจว่าแอปพลิเคชันของคุณทำงานได้ตามที่คาดหวัง อย่าลืมให้ความสำคัญกับแนวทางแบบ declarative ของ React และลดการจัดการ DOM โดยตรงให้น้อยที่สุดเพื่อรักษา codebase ที่สะอาด บำรุงรักษาง่าย และทดสอบได้