Javascript 如何在onclick上创建弹出菜单？

因此，当用户点击react中的按钮时，我试图创建一个背景灰显的弹出菜单 我的代码如下所示：

//ifButtonClicked called another class. this function only runs if another //button is clicked

//some code
export function ifButtonClicked(){
var element = document.createElement("div");
var post_settings = document.createElement("div");
post_settings.className = "post_settings";
post_settings.innerHTML = "button"
post_settings.onclick = (event) => onClickPostSettings(event);
element.append(post_settings);
}

function onClickPostSettings(event){

      //I want it to popup a menu here 
}


*/

---

由于我不能使用HTML标记，我想知道是否有任何方法可以实现onClick上的弹出菜单。我应该创建一个新类并在onClickPostsettings中调用该类吗？

我已经使用状态创建了一个简单的

弹出菜单。你可以查一下这个来了解一些情况


函数应用程序（）{
const[popUpMenu，setPopUpMenu]=React.useState（false）；
返回(
setPopUpMenu（！popUpMenu）}>
下拉菜单
{popUpMenu&&popUpMenu（）}
);
}
函数弹出菜单（）{
返回(

菜单项-1
菜单项2
菜单项3

);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
。下拉列表{
列表样式：无；
}
.下拉列表李{
填充：10px 0px；
边框底部：1px实心#CCCC；
宽度：100px；
文本对齐：居中；
背景#fbf6f6；
}

您可以创建一个名为
PopUp
的组件，然后通过侦听单击事件并更改状态，您可以轻松显示或隐藏该组件。非常感谢！，我试图把我的代码和你的代码结合起来。当你说要创建一个名为PopUp的组件时，我应该这样做吗？函数onClickPostSettings（event，props）{return（）}您可以使用一个状态来存储一个值，然后检查该值是否已设置或为null。你的组件将始终存在，但你只需要根据点击显示它。啊，明白了！谢谢你的帮助！