Web Component自定义事件无法被React函数组件捕获的排查求助

1. 自定义事件未配置必要的传播属性 #

你的CustomEvent默认不会冒泡，也无法穿透Shadow DOM（如果你的DatePicker使用了Shadow DOM），导致外部React组件无法捕获事件。

修复代码：
修改DatePicker类中的emitSelectDateEvent方法：

emitSelectDateEvent(dateTile: HTMLButtonElement) {
  if (parseInt(dateTile.innerHTML) === this.date.date) {
    const event = new CustomEvent("select-date", {
      detail: this.date,
      bubbles: true,       // 允许事件向上冒泡
      composed: true       // 允许穿透Shadow DOM（若使用了则必须配置）
    });
    this.dispatchEvent(event);
    console.log(event);
  }
}

2. 全局查询元素存在匹配错误风险 #

你用document.querySelector("date-picker")获取元素，若页面存在多个该组件，会绑定到第一个匹配的实例，而非当前FormField内的组件；若组件重新渲染导致元素被替换，旧的监听会绑定在已销毁的元素上，新元素无监听。

修复代码：
改用React的useRef精准获取当前组件内的date-picker实例：

// 1. 导入useRef
import { useRef, useEffect } from "react";

const FormField = ({
  element,
  fieldRef,
  handleInputClick,
  id,
  name,
  onInputChange,
  type,
  value,
}: FormFieldProps) => {
  // 2. 创建ref
  const datePickerRef = useRef<DatePicker>(null);

  useEffect(() => {
    const datePicker = datePickerRef.current;
    if (datePicker) {
      datePicker.addEventListener("select-date", handleSelectDate);
    }

    return () => {
      if (datePicker) {
        datePicker.removeEventListener("select-date", handleSelectDate);
      }
    };
  }, []);

  // ... 其他代码

  // 3. 在JSX中绑定ref
  {name === "releaseYear" && (
    <date-picker
      ref={datePickerRef}
      format={"MMM DD (DDD), YYYY"}
      date={"01-01-2023"}
      position={"top"}
      visible
    ></date-picker>
  )}
};

3. 事件处理函数的类型定义错误 #

你将事件参数类型定义为CustomEventInit，但实际接收的是CustomEvent实例，可能导致TypeScript类型检查异常，甚至影响事件捕获。

修复代码：

const handleSelectDate = (event: CustomEvent): void => {
  console.log(
    "select-date event received in Calendar component with date:",
    event.detail
  );
  // ... 后续逻辑
};

4. 确认this.date的有效性 #

在emitSelectDateEvent中添加日志，确认this.date是否为预期的日期对象：

emitSelectDateEvent(dateTile: HTMLButtonElement) {
  console.log("当前日期对象:", this.date); // 确认数据是否正确
  if (parseInt(dateTile.innerHTML) === this.date.date) {
    // ... 事件创建逻辑
  }
}

内容的提问来源于stack exchange，提问作者Klem Lloyd Mwenya