第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在 onclick 上創(chuàng)建彈出菜單?

如何在 onclick 上創(chuàng)建彈出菜單?

嗶嗶one 2022-06-05 17:05:19
因此,當(dāng)用戶單擊反應(yīng)中的按鈕時(shí),我嘗試創(chuàng)建一個(gè)背景為灰色的彈出菜單 我的代碼如下所示://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 標(biāo)簽,我想知道是否有任何方法可以在 onClick 上實(shí)現(xiàn)彈出菜單。我應(yīng)該創(chuàng)建一個(gè)新類并在 onClickPostsettings 中調(diào)用該類嗎?
查看完整描述

1 回答

?
富國滬深

TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊

我創(chuàng)建了一個(gè)簡單的popUpMenu使用狀態(tài)。你可以檢查一下這個(gè)有一些想法。


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>


查看完整回答
反對(duì) 回復(fù) 2022-06-05
  • 1 回答
  • 0 關(guān)注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)