React中双击功能失效求助：基于e.detail改造代码无效

问题分析 #

你的代码无法正常工作的核心原因是：

• 传递给 popUpHandler 的不是标准 React 鼠标事件，而是组件库自定义的事件（如 Editor/DeleteAlert/QuickInfo 类型），这类事件没有 e.detail 属性，因此通过 switch(e.detail) 无法匹配双击逻辑。
• 你错误地将事件类型声明为 React.MouseEvent<HTMLButtonElement>，但实际事件包含自定义属性（type/data/cancel），这会导致类型不匹配甚至运行时错误。

解决方案：手动追踪双击事件 #

由于无法依赖 e.detail，我们可以通过记录点击时间戳的方式判断是否为双击（两次点击间隔小于 300ms 通常被认定为双击）。

步骤 1：添加状态变量追踪上次点击时间

在组件中引入 useState 并定义状态：

import { useState } from 'react';

// 记录上次点击的时间戳
const [lastClickTime, setLastClickTime] = useState<number>(0);

步骤 2：修改 popUpHandler 实现双击判断

const popUpHandler = (e) => {
  const currentTime = Date.now();
  // 判断是否为双击（间隔小于 300ms）
  const isDoubleClick = currentTime - lastClickTime < 300;

  if (isDoubleClick) {
    // 原业务逻辑仅在双击时执行
    console.log('popUpHandler', e);
    if (e.type === 'Editor') {
      e.cancel = true;
      if (e.data.Id !== undefined) {
        getApptDetail(e.data.Id).then(response => {
          const doctorFromDb = response.data.doctor;
          if (doctorFromDb.includes('|')) {
            setStringOfDoctor(doctorFromDb.split('|'));
          } else {
            setStringOfDoctor([doctorFromDb]);
          }
          setAppt(response.data);
        });
        setOpenUpdatePopup(true);
      } else if (e.data.StartTime !== undefined) {
        setStringOfDoctor([]);
        setStartTime(e.data.StartTime);
        setDoctorName(e.data.Doctor);
        setOpenPopup(true);
      }
    }
    if (e.type === 'DeleteAlert') {
      e.cancel = true;
      if (e.data.Id !== undefined) {
        getApptDetail(e.data.Id).then(response => {
          setAppt(response.data);
        });
        setOpenDeletePopup(true);
      }
    }
    if (e.type === 'QuickInfo' && e.target.classList[0] === 'e-work-cells') {
      e.cancel = true;
      if (e.data.StartTime !== undefined) {
        setStringOfDoctor([]);
        setStartTime(e.data.StartTime);
        setDoctorName(e.data.Doctor);
        setOpenPopup(true);
      }
    }
  } else {
    // 非双击时更新上次点击时间戳
    setLastClickTime(currentTime);
  }
};

关键说明 #

• 300ms 是双击判断的通用阈值，可根据交互需求调整。
• 该方式不依赖组件库的事件属性，兼容性更好，适用于自定义事件场景。
• 移除了错误的 React.MouseEvent 类型声明，避免类型冲突。

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