Javascript 将鼠标悬停在React中输入的最后一个字符上时显示菜单

我目前正在使用React引导程序开发一个表单，该表单有一个接收消息的主体。该信息应包括从下拉菜单中选择的一些标签。问题是，当用户输入一个-，然后，用户从菜单中选择一个选项，该选项将替换“与”。除了菜单上显示的部分，我几乎处理了所有的事情。如何始终在用户输入的最后一个字符处显示菜单，以及在该字符上悬停时如何显示菜单。比如说,

“您好，亲爱的，今天我们将处理&[当鼠标悬停在符号上时，必须在此处显示菜单]”

老实说，我很困惑，我只需要想一想我应该如何开始。如果有什么可以帮忙的，我将非常感激。提前谢谢

---

问候。

这是我想到的

为了实现这一点，我想到的第一件事是检测

input

或

textarea

中的插入符号位置

我找到了这个图书馆，它工作得很好。

下一个任务是找出如何在

input

或

textarea

中放置菜单。为此，我简单地创建了一个父级

div

，并设置了输入

100%的宽度和高度

，然后我们可以使用

position:absolute

在该div中放置任何html标记，就像在

input

标记中添加内容一样

菜单添加了

top

&

left

我使用该库得到的。其余的代码都是基本的，您只需在下面检查一下，就可以简单地了解到这一点

代码如下：

const menu=document.querySelector（“.menu”）
功能显示菜单（元素）{
让lastChar=element.value[element.value.length-1]，
插入符号=getCaretCoordinates（元素，元素.selectionEnd）；
如果（lastChar==“&”）{
menu.style.display='block'；
menu.style.left=caret.left+20+“px”
menu.style.top=caret.top+20+“px”
}否则{
menu.style.display='none'
}
}
函数copyText（文本）{
const input=document.querySelector（“#input”）
input.value+=“”+文本
menu.style.display='none'
}

*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：Arial、Helvetica、无衬线字体；
过渡：所有0.3秒缓解；
}
身体{
高度：100vh；
宽度：100vw；
显示：网格；
地点内容：中心；
背景色：蓝紫色；
}
.家长{
位置：相对位置；
宽度：500px；
高度：120px；
}
#输入{
背景色：白色；
宽度：100%；
身高：100%；
边界：无；
边界半径：10px；
填充：20px；
}
#输入：焦点{
边界：0；
大纲：无；
}
.菜单{
显示：无；
位置：绝对位置；
背景色：黑色；
颜色：白色；
宽度：100px；
}
李先生{
文本对齐：居中；
光标：指针；
高度：60px；
列表样式：无；
显示：网格；
地点内容：中心；
填充：10px；
}
李：悬停{
背景：白色；
;
颜色：黑色；
边框：1px纯黑
}

芒果
香蕉
苹果
橙色
Grapes

嘿，我还没有学会如何反应，但我可以问一个问题吗，也许我能帮上忙。@ZiaAhmad当然可以。好的，为了简单起见，当用户在输入字段中输入“'&”时，您希望显示一个下拉菜单。是吗？@ZiaAhmad是的。但是我希望菜单总是在用户输入的最后一个字符旁边。赛义夫，我做了一些东西，这是你需要的吗？