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

Question

因此，当用户单击反应中的按钮时，我尝试创建一个背景为灰色的弹出菜单我的代码如下所示：//ifButtonClicked called another class. this function only runs if another //button is clicked//some codeexport 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() {

  const [popUpMenu, setPopUpMenu] = React.useState(false);

  return (

    <div className="App">

      <button onClick={() => setPopUpMenu(!popUpMenu)}>

        Menu with Dropdown

      </button>

      {popUpMenu && PopUpMenu()}

    </div>

  );

}

function PopUpMenu() {

  return (

    <ul className="drop-down">

      <li>Menu-item-1</li>

      <li>Menu-item-2</li>

      <li>Menu-item-3</li>

    </ul>

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

.drop-down {

  list-style: none;

}

.drop-down li {

  padding: 10px 0px;

  border-bottom: 1px solid #cccccc;

  width: 100px;

  text-align: center;

  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>