反应.防止双击时的单击事件

Question

我试图实现一个计时器来区分单次点击和dbl点击事件，所以当dbl点击时，单次点击不会触发。

编辑:我应该澄清，我想要的组件反应不同的单/双击，双击是工作的，但当我双击它也触发单个点击事件。我想忽略在双击

时的单击。

export const useNoClickOnDblClick = (onClick: () => void, onDoubleClick: () => void) => {
const [clicks, setClicks] = useState(0);
useEffect(() => {
let singleClickTimer: string | number | NodeJS.Timeout | undefined;
if (clicks === 1) {
singleClickTimer = setTimeout(function () {
onClick();
setClicks(0);
}, 250);
} else if (clicks === 2) {
onDoubleClick();
setClicks(0);
}
return () => clearTimeout(singleClickTimer);
}, [clicks]);
return {
clicks,
setClicks
};
};

不确定这是否是最好的方式，但我在这个线程的底部遇到了这个实现，https://github.com/facebook/react/issues/3185

它似乎适用于基本用法，没有参数的函数，如下面

const { setClicks } = useNoClickOnDblClick(handleRenderInfo, () => console.log('dbl click'));

<SummaryCard
data={data}
onCardClick={() => setClicks((prev) => prev + 1)}
/>

但是我想做这样的事情，我需要为每张卡片传递不同的数据

const { setClicks } = useNoClickOnDblClick(handleRenderLevelInfo, () => console.log('dbl click'));
{mineData.levelArr.map((level, i) => {
return (
<MineCard
key={i}
data={level}
onCardClick={() => setClicks((prev) => prev + 1)}
//onCardClick={() => handleRenderLevelInfo({ ...level, idx: i })}
onCardDblClick={() =>
navigateTo({ path: `/${surveyPointsPrefix}/${mineID}/${level.level}` })
}
/>
);
})}

我如何从。map传递关卡数据?我知道我可以将整个东西与单/双击一起传递到customHook中，但我觉得如果我试图重用钩子等，它会变得相当混乱。

谢谢你的帮助。

Answer 1

singleClickMethod () {};
doubleClickMethod () {};
hasDoubleClick = false:
onClickHandler (event) {
event.preventDefault();
event.stopPropagation();
setTimeout(() => {
if (hasDoubleClick) {
hasDoubleClick = false;
return;
}
singleClickMethod();
});
};
onDblClickHandler () {
hasDoubleClick = true;
doubleClickMethod();
}

这种方法将为您工作，并区分点击事件。