Javascript 如何创建Konva React关联菜单

据我所知，Konva没有一种简单/内置的方法来创建右键单击对象的上下文菜单。我正忙于一个需要使用上下文菜单的项目，所以我想我应该创建自己的上下文菜单

不用说，我对Konva还很陌生，所以我希望有人能有更多的经验来帮助我克服最后的障碍

我已经创建了一个沙箱，位于

这些要求是：

对象应该是可拖动的。（我从Konva沙箱复制了一个工作示例。）

右键单击对象时，对象应显示上下文菜单

上下文菜单应该是动态的，因此允许多个项目，每个项目在单击时执行自己的回调

选择后，应关闭关联菜单

到目前为止，我大部分都做对了，但我正在努力解决的问题是：

我不知道如何将鼠标悬停在一个上下文菜单项上，突出显示它，然后移动到下一个应该突出显示的菜单项，并将旧菜单项恢复为原始设置

移出关联菜单将重新绘制整个对象。我不明白为什么

单击一个项目将触发两个项目的回调。为什么？我的目标是单击的特定菜单项，但两者都得到了吗

这一点不是一个bug，而是我不确定如何继续：如果用户在对象上多次右键单击，我如何防止创建多个上下文菜单？从概念上讲，我知道我可以用上下文菜单的名称搜索层（？）中的任何项目并将其关闭，但是我不知道如何做到这一点

---

我将感谢任何帮助。提前谢谢。

恐怕不是在react中，而是在plain JS中，但它为您必须做的一些事情提供了启示

单击粉色圆圈，然后选择选项2并单击子选项2

需要更多工作的领域：

• 通过JSON传递菜单配置数据
• 使添加回调成为类内的方法
• 在隐藏上添加一个超时，以允许抖动的鼠标指针
• 如何在用户鼠标悬停或单击其他选项时隐藏子菜单
• 添加显示和隐藏动画

//设置画布/舞台
var stage=new Konva.stage（{container:'container1'，宽度：600，高度：300}）；
//为一些示例形状添加一个图层
var layer=new Konva.layer（{draggable:false}）；
阶段。添加（层）；
//画一些形状。
var circle=new Konva.circle（{x:80，y:80，半径：30，填充：'Magenta'}）；
图层。添加（圆圈）；
var rect=new Konva.rect（{x:80，y:80，宽度：60，高度：40，填充：“青色”}）；
层。添加（rect）；
stage.draw（）；
//这就是“现在结束菜单”的乐趣所在
//我决定设置一个简单的JS对象来定义我的菜单结构——可以很容易地从JSON格式的异步接收。[家庭作业#1]
var menuData={选项：[
{key:'opt1'，text:'Option 1'，callBack:null}，
{键：'opt2'，文本：'Option 2'，回调：null，
选项：[
{key:'opt2-1'，text:'Sub 1'，callBack:null}，
{key:'opt2-2'，text:'sub2'，回调：null}
]
},
{key:'opt3'，text:'Option 3'，callBack:null}，
{key:'opt4'，text:'Option 4'，callBack:null}
]};
//定义菜单“类”对象。
变量菜单=功能（菜单数据）{
var optHeight=20；//两个维度常量。
var optWidth=100；
变量颜色=['白色'，'金色']；
this.options={}；//准备一个可由key访问的关联列表-将key作为名称放入形状中，以便我们可以从click事件获取此条目
this.menuGroup=new Konva.Group（{}）；//准备一个画布组来保存此级别的选项rects。使其可通过此前缀从外部访问
var _this=this；//为this放置一个ref，以便稍后克服这种混淆。
//递归函数，用于添加菜单级别并指定其选项组件。
var addHost=function（menuData、hostGroup、level、pos）{//params是级别、父组、级别计数器和偏移位置计数器的数据
var menuHost=new Konva.Group（{visible:false}）；//创建一个画布组以包含新选项
添加（menuHost）；//添加到父组
//对于此级别的每个选项
对于（变量i=0；i