我制作自定义上下文菜单 这里的代码:
function useContextMenu() {
const [position, setPosition] = useState({
x: 0,
y: 0
});
const [isShow, setIsShow] = useState(false);
useEffect(() => {
const handleClick = () => setIsShow(false);
const hideEvent = "click blur";
hideEvent.split(" ").forEach((e) => {
window.addEventListener(e, handleClick);
});
return () => {
hideEvnet.split(" ").forEach((e) => {
window.removeEventListener(e, handleClick);
});
};
}, []);
function contextMenu() {
return (isShow && createPortal( < ContextMenu position = {
position
}
/>,document.body))
}
function onClick(event) {
event.preventDefault();
setPosition({
x: event.pageX,
y: event.pageY
});
setIsShow(true);
}
return [contextMenu, onClick];
}
function AlbumCard({
index,
album
}) {
const [contextMenu, onClick] = useContextMenu();
return ( <
div className = "album-card"
onContextMenu = {
(e) => onClick(e)
} > {
contextMenu()
} <
/div>
);
}
如果我在上下文菜单外单击它工作正常,它关闭但如果我右键单击打开另一个,旧的不会关闭,我认为问题是每个 AlbumCard 都有自己的上下文菜单门户,我已经尝试过将“menucontext”添加到事件侦听器,但它不起作用。