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

Question

因此，当用户单击反应中的按钮时，我尝试创建一个背景为灰色的弹出菜单我的代码如下所示：

//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 中调用该类吗？

Answer 1

我创建了一个简单的popUpMenu使用状态。您可以检查一下以了解一些想法。function App() {&nbsp; const [popUpMenu, setPopUpMenu] = React.useState(false);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <button onClick={() => setPopUpMenu(!popUpMenu)}>&nbsp; &nbsp; &nbsp; &nbsp; Menu with Dropdown&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; {popUpMenu && PopUpMenu()}&nbsp; &nbsp; </div>&nbsp; );}function PopUpMenu() {&nbsp; return (&nbsp; &nbsp; <ul className="drop-down">&nbsp; &nbsp; &nbsp; <li>Menu-item-1</li>&nbsp; &nbsp; &nbsp; <li>Menu-item-2</li>&nbsp; &nbsp; &nbsp; <li>Menu-item-3</li>&nbsp; &nbsp; </ul>&nbsp; );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);.drop-down {&nbsp; list-style: none;}.drop-down li {&nbsp; padding: 10px 0px;&nbsp; border-bottom: 1px solid #cccccc;&nbsp; width: 100px;&nbsp; text-align: center;&nbsp; background: #fbf6f6;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script><div id="root"></div>