因此，當用戶單擊反應(yīng)中的按鈕時，我嘗試創(chuàng)建一個背景為灰色的彈出菜單我的代碼如下所示：//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 上實現(xiàn)彈出菜單。我應(yīng)該創(chuàng)建一個新類并在 onClickPostsettings 中調(diào)用該類嗎？
1 回答
largeQ
TA貢獻2039條經(jīng)驗 獲得超8個贊
我創(chuàng)建了一個簡單的popUpMenu使用狀態(tài)。您可以檢查一下以了解一些想法。
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>
- 1 回答
- 0 關(guān)注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消