React中如何给元素同时添加单击事件和双击事件，防止单击事件和双击事件冲突

背景：

单击事件和双击事件同时写在元素上只会执行单击事件

解决方案：

给单击事件添加定时器，调用单击事件和双击事件之前取消上一次未执行的定时器，执行双击事件时就不会再执行单击事件

代码：

import React from "react";

// 设置一个单击的定时器
let clickTimer = null;
export default function func(props) {
return(
    <div
        onClick={() => {
          clearTimeout(clickTimer)
          clickTimer = setTimeout(() => {
            //单击事件方法
            ...
          }, 300); // 设置一个较短的延迟时间
        }}
        onDoubleClick={() => {
          clearTimeout(clickTimer)
          //双击事件方法
          ...
        }}
      >
    </div>
)
}

备注:

300ms是比较合适的时间