Menguasai Penanganan Event React Portal: Delegasi Event Lintas Pohon DOM untuk Aplikasi Global

Dalam dunia pengembangan web yang luas dan saling terhubung, membangun antarmuka pengguna yang intuitif dan responsif yang melayani audiens global adalah hal yang terpenting. React, dengan arsitektur berbasis komponennya, menyediakan alat yang kuat untuk mencapai ini. Di antaranya, React Portals menonjol sebagai mekanisme yang sangat efektif untuk me-render turunan ke dalam node DOM yang ada di luar hierarki komponen induk. Kemampuan ini sangat berharga untuk membuat elemen UI seperti modal, tooltip, dropdown, dan notifikasi yang perlu melepaskan diri dari batasan gaya atau konteks penumpukan `z-index` induknya.

Meskipun Portal menawarkan fleksibilitas yang luar biasa, mereka memperkenalkan tantangan unik: penanganan event, terutama ketika berhadapan dengan interaksi yang mencakup berbagai bagian dari Document Object Model (DOM). Ketika seorang pengguna berinteraksi dengan elemen yang di-render melalui Portal, perjalanan event melalui pohon DOM mungkin tidak sejalan dengan struktur logis pohon komponen React. Hal ini dapat menyebabkan perilaku yang tidak terduga jika tidak ditangani dengan benar. Solusinya, yang akan kita jelajahi secara mendalam, terletak pada konsep dasar pengembangan web: Delegasi Event.

Panduan komprehensif ini akan mengungkap misteri penanganan event dengan React Portals. Kita akan mendalami seluk-beluk sistem event sintetis React, memahami mekanisme event bubbling dan capture, dan yang terpenting, mendemonstrasikan cara mengimplementasikan delegasi event yang tangguh untuk memastikan pengalaman pengguna yang mulus dan dapat diprediksi untuk aplikasi Anda, terlepas dari jangkauan global atau kompleksitas UI-nya.

Memahami React Portals: Jembatan Lintas Hierarki DOM

Sebelum mendalami penanganan event, mari kita perkuat pemahaman kita tentang apa itu React Portals dan mengapa mereka begitu krusial dalam pengembangan web modern. React Portal dibuat menggunakan `ReactDOM.createPortal(child, container)`, di mana `child` adalah turunan React apa pun yang dapat di-render (misalnya, elemen, string, atau fragmen), dan `container` adalah elemen DOM.

Mengapa React Portals Penting untuk UI/UX Global

Pertimbangkan dialog modal yang perlu muncul di atas semua konten lain, terlepas dari properti `z-index` atau `overflow` komponen induknya. Jika modal ini di-render sebagai turunan biasa, ia mungkin terpotong oleh induk dengan `overflow: hidden` atau kesulitan untuk muncul di atas elemen-elemen sibling karena konflik `z-index`. Portal memecahkan masalah ini dengan memungkinkan modal dikelola secara logis oleh komponen induk React-nya, tetapi secara fisik di-render langsung ke node DOM yang ditentukan, sering kali merupakan turunan dari document.body.

• Melepaskan Diri dari Batasan Kontainer: Portal memungkinkan komponen untuk "melarikan diri" dari batasan visual dan gaya dari kontainer induknya. Ini sangat berguna untuk overlay, dropdown, tooltip, dan dialog yang perlu memposisikan diri relatif terhadap viewport atau di bagian paling atas dari konteks penumpukan.
• Mempertahankan Konteks dan State React: Meskipun di-render di lokasi DOM yang berbeda, komponen yang di-render melalui Portal mempertahankan posisinya di pohon React. Ini berarti ia masih dapat mengakses konteks, menerima props, dan berpartisipasi dalam manajemen state yang sama seolah-olah itu adalah turunan biasa, menyederhanakan aliran data.
• Aksesibilitas yang Ditingkatkan: Portal dapat menjadi instrumen dalam menciptakan UI yang dapat diakses. Misalnya, modal dapat di-render langsung ke dalam document.body, membuatnya lebih mudah untuk mengelola perangkap fokus dan memastikan pembaca layar menafsirkan konten dengan benar sebagai dialog tingkat atas.
• Konsistensi Global: Untuk aplikasi yang melayani audiens global, perilaku UI yang konsisten sangat penting. Portal memungkinkan pengembang untuk mengimplementasikan pola UI standar (seperti perilaku modal yang konsisten) di berbagai bagian aplikasi tanpa harus berjuang dengan masalah CSS bertingkat atau konflik hierarki DOM.

Pengaturan tipikal melibatkan pembuatan node DOM khusus di index.html Anda (misalnya, <div id="modal-root"></div>) dan kemudian menggunakan `ReactDOM.createPortal` untuk me-render konten ke dalamnya. Sebagai contoh:

// public/index.html
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

// MyModal.js
import React from 'react';
import ReactDOM from 'react-dom';

const portalRoot = document.getElementById('portal-root');

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

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

export default MyModal;

Teka-teki Penanganan Event: Ketika Pohon DOM dan React Berbeda Arah

Sistem event sintetis React adalah sebuah keajaiban abstraksi. Ini menormalkan event browser, membuat penanganan event konsisten di berbagai lingkungan dan secara efisien mengelola event listener melalui delegasi di tingkat `document`. Ketika Anda melampirkan handler `onClick` ke elemen React, React tidak secara langsung menambahkan event listener ke node DOM spesifik tersebut. Sebaliknya, ia melampirkan satu listener untuk jenis event tersebut (misalnya, `click`) ke `document` atau root dari aplikasi React Anda.

Ketika sebuah event browser yang sebenarnya terjadi (misalnya, sebuah klik), ia akan melakukan bubbling ke atas pohon DOM asli ke `document`. React mencegat event ini, membungkusnya dalam objek event sintetisnya, dan kemudian mengirimkannya kembali ke komponen React yang sesuai, mensimulasikan bubbling melalui pohon komponen React. Sistem ini bekerja sangat baik untuk komponen yang di-render dalam hierarki DOM standar.

Keunikan Portal: Sebuah Jalan Memutar di DOM

Di sinilah letak tantangan dengan Portal: sementara elemen yang di-render melalui Portal secara logis adalah turunan dari induk React-nya, lokasi fisiknya di pohon DOM bisa sama sekali berbeda. Jika aplikasi utama Anda di-mount di <div id="root"></div> dan konten Portal Anda di-render ke <div id="portal-root"></div> (sebuah sibling dari `root`), event klik yang berasal dari dalam Portal akan melakukan bubbling ke atas jalur DOM aslinya *sendiri*, akhirnya mencapai `document.body` dan kemudian `document`. Itu *tidak* akan secara alami melakukan bubbling melalui `div#root` untuk mencapai event listener yang terpasang pada leluhur dari induk *logis* Portal di dalam `div#root`.

Perbedaan ini berarti bahwa pola penanganan event tradisional, di mana Anda mungkin menempatkan handler klik pada elemen induk dengan harapan menangkap event dari semua turunannya, dapat gagal atau berperilaku tidak terduga ketika turunan tersebut di-render dalam sebuah Portal. Misalnya, jika Anda memiliki `div` di komponen `App` utama Anda dengan listener `onClick`, dan Anda me-render sebuah tombol di dalam Portal yang secara logis merupakan turunan dari `div` tersebut, mengklik tombol itu *tidak* akan memicu handler `onClick` dari `div` melalui bubbling DOM asli.

Namun, dan ini adalah perbedaan yang krusial: sistem event sintetis React memang menjembatani kesenjangan ini. Ketika sebuah event asli berasal dari sebuah Portal, mekanisme internal React memastikan bahwa event sintetis tetap melakukan bubbling ke atas melalui pohon komponen React ke induk logisnya. Ini berarti jika Anda memiliki handler `onClick` pada komponen React yang secara logis berisi Portal, klik di dalam Portal *akan* memicu handler tersebut. Ini adalah aspek fundamental dari sistem event React yang membuat delegasi event dengan Portal tidak hanya mungkin, tetapi juga pendekatan yang direkomendasikan.

Solusinya: Delegasi Event secara Detail

Delegasi event adalah pola desain untuk menangani event di mana Anda melampirkan satu event listener ke elemen leluhur bersama, daripada melampirkan listener individual ke beberapa elemen turunan. Ketika sebuah event (seperti klik) terjadi pada sebuah turunan, ia melakukan bubbling ke atas pohon DOM hingga mencapai leluhur dengan listener yang didelegasikan. Listener tersebut kemudian menggunakan properti `event.target` untuk mengidentifikasi elemen spesifik di mana event berasal dan bereaksi sesuai.

Keuntungan Utama Delegasi Event

• Optimisasi Kinerja: Alih-alih banyak event listener, Anda hanya memiliki satu. Ini mengurangi konsumsi memori dan waktu penyiapan, terutama bermanfaat untuk UI kompleks dengan banyak elemen interaktif atau untuk aplikasi yang digunakan secara global di mana efisiensi sumber daya sangat penting.
• Penanganan Konten Dinamis: Elemen yang ditambahkan ke DOM setelah render awal (misalnya, melalui permintaan AJAX atau interaksi pengguna) secara otomatis mendapat manfaat dari listener yang didelegasikan tanpa perlu melampirkan listener baru. Ini sangat cocok untuk konten Portal yang di-render secara dinamis.
• Kode yang Lebih Bersih: Memusatkan logika event membuat basis kode Anda lebih terorganisir dan lebih mudah dipelihara.
• Ketangguhan di Berbagai Struktur DOM: Seperti yang telah kita bahas, sistem event sintetis React memastikan bahwa event yang berasal dari konten Portal *tetap* melakukan bubbling ke atas melalui pohon komponen React ke leluhur logisnya. Ini adalah landasan yang membuat delegasi event menjadi strategi yang efektif untuk Portal, meskipun lokasi DOM fisiknya berbeda.

Penjelasan Event Bubbling dan Capture

Untuk sepenuhnya memahami delegasi event, penting untuk memahami dua fase propagasi event di DOM:

1. Fase Capturing (Turun): Event dimulai dari root `document` dan berjalan ke bawah pohon DOM, mengunjungi setiap elemen leluhur hingga mencapai elemen target. Listener yang terdaftar dengan `useCapture = true` (atau di React, dengan menambahkan akhiran `Capture`, misalnya, `onClickCapture`) akan dieksekusi selama fase ini.
2. Fase Bubbling (Naik): Setelah mencapai elemen target, event kemudian berjalan kembali ke atas pohon DOM, dari elemen target ke root `document`, mengunjungi setiap elemen leluhur. Sebagian besar event listener, termasuk semua `onClick`, `onChange`, dll. standar React, dieksekusi selama fase ini.

Sistem event sintetis React terutama mengandalkan fase bubbling. Ketika sebuah event terjadi pada elemen di dalam Portal, event browser asli melakukan bubbling ke atas jalur DOM fisiknya. Listener root React (biasanya pada `document`) menangkap event asli ini. Yang terpenting, React kemudian merekonstruksi event tersebut dan mengirimkan pasangan *sintetisnya*, yang *mensimulasikan bubbling ke atas pohon komponen React* dari komponen di dalam Portal ke komponen induk logisnya. Abstraksi cerdas ini memastikan bahwa delegasi event bekerja dengan mulus dengan Portal, meskipun keberadaan DOM fisiknya terpisah.

Mengimplementasikan Delegasi Event dengan React Portals

Mari kita telusuri skenario umum: dialog modal yang menutup ketika pengguna mengklik di luar area kontennya (pada latar belakang) atau menekan tombol `Escape`. Ini adalah kasus penggunaan klasik untuk Portal dan demonstrasi yang sangat baik dari delegasi event.

Skenario: Modal yang Ditutup dengan Klik di Luar Area

Kami ingin mengimplementasikan komponen modal menggunakan React Portal. Modal harus muncul ketika sebuah tombol diklik, dan harus ditutup ketika:

• Pengguna mengklik pada overlay semi-transparan (latar belakang) yang mengelilingi konten modal.
• Pengguna menekan tombol `Escape`.
• Pengguna mengklik tombol "Tutup" eksplisit di dalam modal.

Implementasi Langkah-demi-Langkah

Langkah 1: Siapkan HTML dan Komponen Portal

Pastikan `index.html` Anda memiliki root khusus untuk portal. Untuk contoh ini, mari kita gunakan `id="portal-root"`.

// public/index.html (snippet)
<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- Target portal kita -->
</body>

Selanjutnya, buat komponen `Portal` sederhana untuk mengenkapsulasi logika `ReactDOM.createPortal`. Ini membuat komponen modal kita lebih bersih.

// components/Portal.js
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface PortalProps {
  children: React.ReactNode;
  wrapperId?: string;
}

// Kita akan membuat div untuk portal jika belum ada untuk wrapperId
function createWrapperAndAppendToBody(wrapperId: string) {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
}

function Portal({ children, wrapperId = 'portal-wrapper' }: PortalProps) {
  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId) as HTMLElement;
    let created = false;

    if (!element) {
      created = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Bersihkan elemen jika kita yang membuatnya
      if (created && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  // wrapperElement akan null pada render pertama. Ini tidak masalah karena kita tidak akan me-render apa pun.
  if (!wrapperElement) return null;

  return createPortal(children, wrapperElement);
}

export default Portal;

Catatan: Untuk kesederhanaan, `portal-root` di-hardcode di `index.html` pada contoh-contoh sebelumnya. Komponen `Portal.js` ini menawarkan pendekatan yang lebih dinamis, membuat div pembungkus jika tidak ada. Pilih metode yang paling sesuai dengan kebutuhan proyek Anda. Kami akan melanjutkan menggunakan `portal-root` yang ditentukan di `index.html` untuk komponen `Modal` agar lebih langsung, tetapi `Portal.js` di atas adalah alternatif yang tangguh.

Langkah 2: Buat Komponen Modal

Komponen `Modal` kami akan menerima kontennya sebagai `children` dan callback `onClose`.

// components/Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const modalRoot = document.getElementById('portal-root') as HTMLElement;

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);

  if (!isOpen) return null;

  // Menangani penekanan tombol Escape
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [onClose]);

  // Kunci dari delegasi event: satu handler klik pada latar belakang.
  // Ini juga secara implisit mendelegasikan ke tombol tutup di dalam modal.
  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
    // Periksa apakah target klik adalah latar belakang itu sendiri, bukan konten di dalam modal.
    // Menggunakan `modalContentRef.current.contains(event.target)` sangat penting di sini.
    // event.target adalah elemen yang memulai klik.
    // event.currentTarget adalah elemen di mana event listener terpasang (modal-overlay).
    if (modalContentRef.current && !modalContentRef.current.contains(event.target as Node)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        {children}
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

Langkah 3: Integrasikan ke Komponen Aplikasi Utama

Komponen `App` utama kami akan mengelola state buka/tutup modal dan me-render `Modal`.

// App.js
import React, { useState } from 'react';
import Modal from './components/Modal';
import './App.css'; // Untuk gaya dasar

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div className="App">
      <h1>React Portal Event Delegation Example</h1>
      <p>Demonstrating event handling across different DOM trees.</p>

      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Welcome to the Modal!</h2>
        <p>This content is rendered in a React Portal, outside the main application's DOM hierarchy.</p>
        <button onClick={closeModal}>Close from inside</button>
      </Modal>

      <p>Some other content behind the modal.</p>
      <p>Another paragraph to show the background.</p>
    </div>
  );
}

export default App;

Langkah 4: Gaya Dasar (App.css)

Untuk memvisualisasikan modal dan latar belakangnya.

/* App.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 80%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative; /* Diperlukan untuk penentuan posisi tombol internal jika ada */
}

.modal-content button {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content > button:last-child { /* Gaya untuk tombol tutup 'X' */
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    border: none;
}

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

.App button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.App button:hover {
  background-color: #218838;
}

Penjelasan Logika Delegasi

Dalam komponen `Modal` kami, `onClick={handleBackdropClick}` terpasang pada div `.modal-overlay`, yang bertindak sebagai listener yang didelegasikan. Ketika klik apa pun terjadi di dalam overlay ini (yang mencakup `modal-content` dan tombol tutup `X` di dalamnya, serta tombol 'Tutup dari dalam'), fungsi `handleBackdropClick` dieksekusi.

Di dalam `handleBackdropClick`:

• `event.target` mengacu pada elemen DOM spesifik yang *sebenarnya diklik* (misalnya, `<h2>`, `<p>`, atau `<button>` di dalam `modal-content`, atau `modal-overlay` itu sendiri).
• `event.currentTarget` mengacu pada elemen di mana event listener dilampirkan, yang dalam kasus ini adalah div `.modal-overlay`.
• Kondisi `!modalContentRef.current.contains(event.target as Node)` adalah inti dari delegasi kita. Ini memeriksa apakah elemen yang diklik (`event.target`) *bukan* merupakan turunan dari div `modal-content`. Jika `event.target` adalah `.modal-overlay` itu sendiri, atau elemen lain yang merupakan turunan langsung dari overlay tetapi bukan bagian dari `modal-content`, maka `contains` akan mengembalikan `false`, dan modal akan ditutup.
• Yang terpenting, sistem event sintetis React memastikan bahwa meskipun `event.target` adalah elemen yang secara fisik di-render di `portal-root`, handler `onClick` pada induk logis (`.modal-overlay` dalam komponen Modal) akan tetap dipicu, dan `event.target` akan dengan benar mengidentifikasi elemen yang bersarang dalam.

Untuk tombol tutup internal, cukup memanggil `onClose()` secara langsung pada handler `onClick` mereka berfungsi karena handler ini dieksekusi *sebelum* event melakukan bubbling ke listener yang didelegasikan dari `modal-overlay`, atau mereka ditangani secara eksplisit. Bahkan jika mereka melakukan bubbling, pemeriksaan `contains()` kami akan mencegah modal ditutup jika klik berasal dari dalam konten.

`useEffect` untuk listener tombol `Escape` dilampirkan langsung ke `document`, yang merupakan pola umum dan efektif untuk pintasan keyboard global, karena memastikan listener aktif terlepas dari fokus komponen, dan akan menangkap event dari mana saja di DOM, termasuk yang berasal dari dalam Portal.

Mengatasi Skenario Umum Delegasi Event

Mencegah Propagasi Event yang Tidak Diinginkan: `event.stopPropagation()`

Terkadang, bahkan dengan delegasi, Anda mungkin memiliki elemen spesifik di dalam area yang didelegasikan di mana Anda ingin secara eksplisit menghentikan event dari bubbling lebih jauh ke atas. Misalnya, jika Anda memiliki elemen interaktif bersarang di dalam konten modal Anda yang, ketika diklik, seharusnya *tidak* memicu logika `onClose` (bahkan jika pemeriksaan `contains` sudah menanganinya), Anda bisa menggunakan `event.stopPropagation()`.

<div className="modal-content" ref={modalContentRef}>
  <h2>Modal Content</h2>
  <p>Clicking this area will not close the modal.</p>
  <button onClick={(e) => {
    e.stopPropagation(); // Mencegah klik ini dari bubbling ke latar belakang
    console.log('Inner button clicked!');
  }}>Inner Action Button</button>
  <button onClick={onClose}>Close</button>
</div>

Meskipun `event.stopPropagation()` dapat berguna, gunakanlah dengan bijaksana. Penggunaan berlebihan dapat membuat alur event tidak dapat diprediksi dan debugging menjadi sulit, terutama dalam aplikasi besar yang didistribusikan secara global di mana tim yang berbeda mungkin berkontribusi pada UI.

Menangani Elemen Turunan Spesifik dengan Delegasi

Selain hanya memeriksa apakah klik berada di dalam atau di luar, delegasi event memungkinkan Anda untuk membedakan antara berbagai jenis klik di dalam area yang didelegasikan. Anda dapat menggunakan properti seperti `event.target.tagName`, `event.target.id`, `event.target.className`, atau atribut `event.target.dataset` untuk melakukan tindakan yang berbeda.

const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
  if (modalContentRef.current && modalContentRef.current.contains(event.target as Node)) {
    // Klik berada di dalam konten modal
    const clickedElement = event.target as HTMLElement;

    if (clickedElement.tagName === 'BUTTON' && clickedElement.dataset.action === 'confirm') {
      console.log('Confirm action triggered!');
      onClose();
    } else if (clickedElement.tagName === 'A') {
      console.log('Link inside modal clicked:', clickedElement.href);
      // Berpotensi mencegah perilaku default atau menavigasi secara terprogram
    }
    // Handler spesifik lainnya untuk elemen di dalam modal
  } else {
    // Klik berada di luar konten modal (pada latar belakang)
    onClose();
  }
};

Pola ini menyediakan cara yang kuat untuk mengelola beberapa elemen interaktif di dalam konten Portal Anda menggunakan satu event listener yang efisien.

Kapan Tidak Mendelegasikan

Meskipun delegasi event sangat direkomendasikan untuk Portal, ada skenario di mana event listener langsung pada elemen itu sendiri mungkin lebih tepat:

• Perilaku Komponen yang Sangat Spesifik: Jika sebuah komponen memiliki logika event yang sangat khusus dan mandiri yang tidak perlu berinteraksi dengan handler yang didelegasikan dari leluhurnya.
• Elemen Input dengan `onChange`: Untuk komponen terkontrol seperti input teks, listener `onChange` biasanya ditempatkan langsung pada elemen input untuk pembaruan state segera. Meskipun event ini juga melakukan bubbling, menanganinya secara langsung adalah praktik standar.
• Event Berfrekuensi Tinggi yang Kritis terhadap Kinerja: Untuk event seperti `mousemove` atau `scroll` yang dieksekusi sangat sering, mendelegasikannya ke leluhur yang jauh mungkin memperkenalkan sedikit overhead untuk memeriksa `event.target` berulang kali. Namun, untuk sebagian besar interaksi UI (klik, keydowns), manfaat delegasi jauh melebihi biaya minimal ini.

Pola dan Pertimbangan Tingkat Lanjut

Untuk aplikasi yang lebih kompleks, terutama yang melayani basis pengguna global yang beragam, Anda mungkin mempertimbangkan pola tingkat lanjut untuk mengelola penanganan event di dalam Portal.

Pengiriman Event Kustom

Dalam kasus-kasus pinggiran yang sangat spesifik di mana sistem event sintetis React tidak selaras sempurna dengan kebutuhan Anda (yang jarang terjadi), Anda dapat secara manual mengirimkan event kustom. Ini melibatkan pembuatan objek `CustomEvent` dan mengirimkannya dari elemen target. Namun, ini sering kali melewati sistem event yang dioptimalkan React dan harus digunakan dengan hati-hati dan hanya jika benar-benar diperlukan, karena dapat menimbulkan kompleksitas pemeliharaan.

// Di dalam komponen Portal
const handleCustomAction = () => {
  const event = new CustomEvent('my-custom-portal-event', { detail: { data: 'some info' }, bubbles: true });
  document.dispatchEvent(event);
};

// Di suatu tempat di aplikasi utama Anda, mis., dalam hook efek
useEffect(() => {
  const handler = (event: Event) => {
    if (event instanceof CustomEvent) {
      console.log('Custom event received:', event.detail);
    }
  };
  document.addEventListener('my-custom-portal-event', handler);
  return () => document.removeEventListener('my-custom-portal-event', handler);
}, []);

Pendekatan ini menawarkan kontrol terperinci tetapi memerlukan manajemen jenis event dan payload yang cermat.

Context API untuk Penangan Event

Untuk aplikasi besar dengan konten Portal yang bersarang dalam, meneruskan `onClose` atau handler lain melalui props dapat menyebabkan prop drilling. Context API React menyediakan solusi yang elegan:

// context/ModalContext.js
import React, { createContext, useContext } from 'react';

interface ModalContextType {
  onClose?: () => void;
  // Tambahkan handler terkait modal lainnya sesuai kebutuhan
}

const ModalContext = createContext<ModalContextType>({});

export const useModal = () => useContext(ModalContext);

export const ModalProvider = ({ children, onClose }: ModalContextType & React.PropsWithChildren) => (
  <ModalContext.Provider value={{ onClose }}>
    {children}
  </ModalContext.Provider>
);

// components/Modal.js (diperbarui untuk menggunakan Context)
// ... (impor dan modalRoot didefinisikan)

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);
  // ... (useEffect untuk tombol Escape, handleBackdropClick tetap sebagian besar sama)

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        <ModalProvider onClose={onClose}>{children}</ModalProvider> <!-- Sediakan konteks -->
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

// components/DeeplyNestedComponent.js (di suatu tempat di dalam turunan modal)
import React from 'react';
import { useModal } from '../context/ModalContext';

const DeeplyNestedComponent = () => {
  const { onClose } = useModal();

  return (
    <div>
      <p>This component is deep inside the modal.</p>
      {onClose && <button onClick={onClose}>Close from Deep Nest</button>}
    </div>
  );
};

Menggunakan Context API menyediakan cara yang bersih untuk meneruskan handler (atau data relevan lainnya) ke bawah pohon komponen ke konten Portal, menyederhanakan antarmuka komponen dan meningkatkan pemeliharaan, terutama untuk tim internasional yang berkolaborasi pada sistem UI yang kompleks.

Implikasi Kinerja

Meskipun delegasi event sendiri merupakan pendorong kinerja, berhati-hatilah dengan kompleksitas `handleBackdropClick` atau logika yang didelegasikan. Jika Anda melakukan penelusuran DOM yang mahal atau perhitungan pada setiap klik, itu dapat memengaruhi kinerja. Optimalkan pemeriksaan Anda (misalnya, `event.target.closest()`, `element.contains()`) agar seefisien mungkin. Untuk event berfrekuensi sangat tinggi, pertimbangkan debouncing atau throttling jika perlu, meskipun ini kurang umum untuk event klik/keydown sederhana di modal.

Pertimbangan Aksesibilitas (A11y) untuk Audiens Global

Aksesibilitas bukanlah hal yang dipikirkan belakangan; ini adalah persyaratan mendasar, terutama saat membangun untuk audiens global dengan beragam kebutuhan dan teknologi bantu. Saat menggunakan Portal untuk modal atau overlay serupa, penanganan event memainkan peran penting dalam aksesibilitas:

• Manajemen Fokus: Ketika modal terbuka, fokus harus secara terprogram dipindahkan ke elemen interaktif pertama di dalam modal. Ketika modal ditutup, fokus harus kembali ke elemen yang memicu pembukaannya. Ini sering ditangani dengan `useEffect` dan `useRef`.
• Interaksi Keyboard: Fungsionalitas tombol `Escape` untuk menutup (seperti yang didemonstrasikan) adalah pola aksesibilitas yang krusial. Pastikan semua elemen interaktif di dalam modal dapat dinavigasi dengan keyboard (tombol `Tab`).
• Atribut ARIA: Gunakan peran dan atribut ARIA yang sesuai. Untuk modal, `role="dialog"` atau `role="alertdialog"`, `aria-modal="true"`, dan `aria-labelledby` atau `aria-describedby` sangat penting. Atribut-atribut ini membantu pembaca layar mengumumkan kehadiran modal dan menjelaskan tujuannya.
• Perangkap Fokus: Terapkan perangkap fokus di dalam modal. Ini memastikan bahwa ketika pengguna menekan `Tab`, fokus hanya berputar melalui elemen-elemen *di dalam* modal, bukan elemen di aplikasi latar belakang. Ini biasanya dicapai dengan handler `keydown` tambahan pada modal itu sendiri.

Aksesibilitas yang tangguh bukan hanya tentang kepatuhan; ini memperluas jangkauan aplikasi Anda ke basis pengguna global yang lebih luas, termasuk individu dengan disabilitas, memastikan semua orang dapat berinteraksi secara efektif dengan UI Anda.

Praktik Terbaik untuk Penanganan Event React Portal

Untuk meringkas, berikut adalah praktik terbaik utama untuk menangani event secara efektif dengan React Portals:

• Terapkan Delegasi Event: Selalu lebih suka melampirkan satu event listener ke leluhur bersama (seperti latar belakang modal) dan gunakan `event.target` dengan `element.contains()` atau `event.target.closest()` untuk mengidentifikasi elemen yang diklik.
• Pahami Event Sintetis React: Ingatlah bahwa sistem event sintetis React secara efektif menargetkan ulang event dari Portal untuk melakukan bubbling ke atas pohon komponen React logis mereka, membuat delegasi dapat diandalkan.
• Kelola Listener Global dengan Bijaksana: Untuk event global seperti penekanan tombol `Escape`, lampirkan listener langsung ke `document` di dalam hook `useEffect`, memastikan pembersihan yang tepat.
• Minimalkan `stopPropagation()`: Gunakan `event.stopPropagation()` dengan hemat. Ini dapat menciptakan alur event yang kompleks. Rancang logika delegasi Anda untuk menangani target klik yang berbeda secara alami.
• Prioritaskan Aksesibilitas: Terapkan fitur aksesibilitas yang komprehensif sejak awal, termasuk manajemen fokus, navigasi keyboard, dan atribut ARIA yang sesuai.
• Manfaatkan `useRef` untuk Referensi DOM: Gunakan `useRef` untuk mendapatkan referensi langsung ke elemen DOM di dalam portal Anda, yang sangat penting untuk pemeriksaan `element.contains()`.
• Pertimbangkan Context API untuk Props Kompleks: Untuk pohon komponen yang dalam di dalam Portal, gunakan Context API untuk meneruskan penangan event atau state bersama lainnya, mengurangi prop drilling.
• Uji Secara Menyeluruh: Mengingat sifat lintas-DOM dari Portal, uji penanganan event secara ketat di berbagai interaksi pengguna, lingkungan browser, dan teknologi bantu.

Kesimpulan

React Portals adalah alat yang sangat diperlukan untuk membangun antarmuka pengguna yang canggih dan menarik secara visual. Namun, kemampuan mereka untuk me-render konten di luar hierarki DOM komponen induk memperkenalkan pertimbangan unik untuk penanganan event. Dengan memahami sistem event sintetis React dan menguasai seni delegasi event, pengembang dapat mengatasi tantangan ini dan membangun aplikasi yang sangat interaktif, berkinerja tinggi, dan dapat diakses.

Mengimplementasikan delegasi event memastikan bahwa aplikasi global Anda memberikan pengalaman pengguna yang konsisten dan tangguh, terlepas dari struktur DOM yang mendasarinya. Ini mengarah pada kode yang lebih bersih, lebih mudah dipelihara, dan membuka jalan bagi pengembangan UI yang dapat diskalakan. Terapkan pola-pola ini, dan Anda akan siap untuk memanfaatkan kekuatan penuh React Portals dalam proyek Anda berikutnya, memberikan pengalaman digital yang luar biasa kepada pengguna di seluruh dunia.