如何使一個反應引導下拉與panelgroups

我試圖做一個下拉列表，其中每個菜單項將有submenuitems 作爲如何使一個反應引導下拉與panelgroups

Drodown(select) 
1. List item(header) 
     Litem-1(subheader) 
     Litem-2(subheader) 
2. Header-2(header) 
     Litem-2-1(subheader) 
     Litem-2-2(subheader)

我使用的反應引導下拉菜單來實現這一其中每個菜單項將有一個項目panelGroup中作爲Litem-1和Litem-2

所以當我點擊選擇下拉應該開放，但是當我點擊單個標題（這是默認情況下不展開），應擴大，不應關閉下拉列表，並點擊時在副標題上下拉必須關閉我已經嘗試使用打開下拉選項，使用此我試圖控制下拉的可見性我可以實現相同的標題，當我嘗試做同樣我無法實現，因爲事件冒泡了，直到父母和下拉保持打開狀態，我還試圖用stopPropagation但看起來像菜單項是不尊重它不知道爲什麼它是

我試圖解決這個問題，因爲這 https://codepen.io/anon/pen/WONMGd 的情況下，可以有一個人請如果這種方法是正確的，並且爲什麼我不能使用event.stopPropagation並防止默認在這裏

謝謝

來源

2017-06-03 Geeky

只是爲了澄清，你想'submit'和'v'按鈕來打開標題列表，那麼你想單擊標題來顯示默認隱藏的子標題？ –

是的確切，這就是我正在尋找 – Geeky

當你點擊一個subheader，那麼它應該關閉？ –

要以您想要的方式使用面板，您必須在面板上設置accordion支撐爲true。看看下面的代碼：

<Dropdown.Menu className="Groups" bsRole="menu"> 
      <MenuItem onClick={this.menuItemClickedThatShouldntCloseDropdown.bind(this)}> 
      <PanelGroup activeKey="1" accordion activeKey={this.state.activeKey}> 
      <Panel header="header1" eventKey='1'> 
       <span onClick={this.menuItemShouldCloseDropDown.bind(this)}>Content-1</span> 
      </Panel> 
       <Panel header="header2" eventKey='2'> 
       <span onClick={this.menuItemShouldCloseDropDown.bind(this)}>content=2</span> 
      </Panel> 
      </PanelGroup> 
     </MenuItem> 
      <MenuItem onClick={this.menuItemClickedThatShouldntCloseDropdown}> 
      hi 
     </MenuItem> 
     </Dropdown.Menu> 

    </Dropdown>

，並添加到您的類定義：

handleSelect(activeKey) { 
    this.setState({ activeKey }) 
    }

這似乎解決你的問題的至少一個。 Id建議撕掉其他僞狀態this._forceOpen邏輯，看看你真正需要什麼。

來源

2017-06-07 23:40:57

我已經考慮了我從這個票據反應引導https：// github.com/react-bootstrap/react-bootstrap/issues/1490 – Geeky

酷我的意思是，如果它的工作原理和它的簡單，然後把它留在 –

感謝您所有的時間，你已經投入 – Geeky

如何使一個反應引導下拉與panelgroups

回答

相關問題