React集成JS Web Component：克隆模板时onChange事件丢失问题

在React应用里使用可复用JS Web Component，组件会将<dialog-component>标签内的HTML内容克隆后渲染到<dialog>中，但带onChange事件的<input type="file">在渲染后事件丢失，无法正常触发，需要确保传入组件的所有输入框、按钮事件都不丢失。

代码示例 #

App.tsx #

import React from 'react';
import './App.css';
import './webComponent/dialog_component'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "dialog-component": DialogComponentProps;
    }
  }
}

interface DialogComponentProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
  > {
  trigger: string;
  target: string;
}

function App() {
  return (
    <div>
      <h1>¡Hola!</h1>

      <div className='sample'>
        <p>Plain File Input</p>
        Upload
        <input
          type="file"
          id="plain"
          className='input-file'
          onChange={() => console.log('Outside Dialog')}
          accept="image/jpeg, image/png"
        />
      </div>

      <button className="btn-open" id="openDialog">Open Modal</button>

      <dialog-component id="dialogSample" trigger="openDialog" target="myDialog">
        <div>
          <p>File Upload in Dialog</p>
          <label htmlFor="outter-one" className='input-label'>
            Upload Picture
            <input
              type="file"
              id="outter-one"
              className='input-file'
              accept="image/jpeg, image/png"
              onChange={() => console.log('Inside Component')}
            />
          </label>          
        </div>
      </dialog-component>
    </div>
  );
}

export default App;

JS Web Component #

class DialogComponent extends HTMLElement {

  connectedCallback() {

    const id = this.getAttribute('id')
    const trigger = this.getAttribute('trigger')
    const target = this.getAttribute('target')

    let dialogChildren = document.getElementById(id).firstChild.cloneNode(true)
    dialogChildren = dialogChildren.innerHTML

    console.log('dialogChildren', dialogChildren);

    const dialogContent = `
      <dialog id="${target}">
        <span class="icon">🍥</span>
        <div class="text-content">
          ${dialogChildren}
        </div>
        <button class="btn-close" close-dialog autofocus>Close Modal</button>
      </dialog>
    `

    this.innerHTML = dialogContent

    // Open Dialog
    const openButton = document.getElementById(trigger)
    const closeButton = this.querySelector('[close-dialog]')
    const dialog = this.querySelector(`#${target}`)

    openButton.addEventListener('click', e => {
      e.preventDefault()      
      dialog.showModal()
    })

    closeButton.addEventListener('click', () => dialog.close())
  }
}

customElements.define('dialog-component', DialogComponent)

问题原因 #

当前代码中，使用cloneNode(true)后又取innerHTML的操作，会把DOM元素转换成纯HTML字符串。事件绑定是存储在DOM元素内存中的，无法被序列化成HTML字符串，因此将字符串重新插入DOM时，原有的事件监听会完全丢失。同时，React渲染自定义元素的逻辑与Web Component的克隆操作结合，也会加剧事件和状态丢失的问题。

解决方法 #

不要将DOM元素转换为HTML字符串，直接操作完整的DOM节点（保留所有事件和属性），将其插入到<dialog>中。具体实现步骤：

1. 直接获取<dialog-component>的子元素，避免使用innerHTML
2. 手动创建<dialog>及内部结构，将原有的子元素直接添加到对话框内容容器中
3. 替换组件内容为组装好的对话框

修改后的Web Component代码 #

class DialogComponent extends HTMLElement {
  connectedCallback() {
    const trigger = this.getAttribute('trigger');
    const target = this.getAttribute('target');

    // 获取组件内部所有子元素，保留完整DOM（包括事件）
    const originalChildren = Array.from(this.children);

    // 创建对话框元素和内部结构
    const dialog = document.createElement('dialog');
    dialog.id = target;

    const iconSpan = document.createElement('span');
    iconSpan.className = 'icon';
    iconSpan.textContent = '🍥';

    const textContentDiv = document.createElement('div');
    textContentDiv.className = 'text-content';
    // 将原有的子元素添加到内容容器，保留所有事件
    originalChildren.forEach(child => textContentDiv.appendChild(child));

    const closeButton = document.createElement('button');
    closeButton.className = 'btn-close';
    closeButton.setAttribute('close-dialog', '');
    closeButton.autofocus = true;
    closeButton.textContent = 'Close Modal';

    // 组装对话框
    dialog.appendChild(iconSpan);
    dialog.appendChild(textContentDiv);
    dialog.appendChild(closeButton);

    // 替换组件内容为对话框
    this.innerHTML = '';
    this.appendChild(dialog);

    // 绑定对话框开关事件
    const openButton = document.getElementById(trigger);
    openButton.addEventListener('click', e => {
      e.preventDefault();
      dialog.showModal();
    });

    closeButton.addEventListener('click', () => dialog.close());
  }
}

customElements.define('dialog-component', DialogComponent);

额外说明 #

• 直接操作DOM节点的方式，能完整保留原有的事件监听和DOM属性，避免字符串转换导致的事件丢失
• 若需要保留原组件内的内容，可以使用cloneNode(true)克隆节点后再添加，但直接移动节点更高效
• React与Web Component配合时，优先让Web Component操作完整DOM节点，避免字符串拼接DOM内容，能更好兼容React事件系统

内容的提问来源于stack exchange，提问作者iChido