如何解决如何停止 onClick 调用,在 Enter 单击事件上
我有一个订阅 onClick 和 onKeyPress(输入点击)的 div。
鼠标点击所需的行为是:第一次点击 - 打开弹出窗口,第二次点击 - 关闭弹出窗口。
输入点击所需的行为是:打开弹出窗口。
将焦点移到 div 并单击 enter 时,订阅的方法会触发两次,并且只需要触发一次。 因为,相同的函数在点击回车时被调用两次,它会打开和关闭弹出窗口。
我尝试了以下方法:
- 订阅 keyUp/keyDown 而不是 onKeyPress。
- 检查,在 onClick 订阅中,如果 event.detail === 0,但它是 0,当输入也被点击时。
- 在 onClick 中,检查 event.type === 'mousedown',但它始终等于 'click'
- 订阅 onMouseDown/Up 而不是 onClick,点击的输入停止工作。
这是触发事件的组件
const eventPressHandler = e => {
if (e.key === 'Enter') {
return handleEventClick(e,true);
}
if (e.key === 'Tab' || (e.shiftKey && e.key === 'Tab')) {
return closeExpanded();
}
}
return (
<>
<div
onClick={handleEventClick}
onKeyPress={eventPressHandler}
className={st(
classes.root,{ isAllDay,isInPopper,isMultiDay,isMobile,isAgenda,isCut,isWeekend },className
)}
>
{event}
</div>
{popper}
</>
)
};
这是父组件中的处理程序:
const handleEventClick = (eventElement,isKeyClicked) => {
isKeyClicked && setIsEventEventEntered(true);
setExpanded(
expanded || type === EventTypes.ShowMore ?
null :
eventElement.currentTarget,() => {
onEventExpanded && onEventExpanded(expandedData) // i use custom hook to fire functions after the setState
}
);
}
解决方法
我是这样解决的:
onClick={e => e.detail === 1 && handleEventClick(e) }
onKeyUp={eventPressHandler}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。