複数のNavDropdownを使用することはできませんか？

Question

私は私のナビゲーションバー内にネストされ、次のコードを持っている：

<Navbar inverse collapseOnSelect fixedTop fluid> 
    <Navbar.Collapse> 
    <Nav onSelect={this.props.onSelect} pullRight> 
     <NavItem eventKey={'navItem1'}>NavItem 1</NavItem> 
     <NavItem eventKey={'navItem2'}>NavItem 2</NavItem> 

     <NavDropdown eventKey={'dropdown1'} title="Dropdown1" id="basic-nav-dropdown"> 
     <MenuItem eventKey={'placeholder1'}>Placeholder</MenuItem> 
     <MenuItem divider /> 
     <MenuItem eventKey={'placeholder2'}>Placeholder</MenuItem> 
     </NavDropdown> 

     <NavDropdown eventKey={'dropdown2'} title="Dropdown2" id="basic-nav-dropdown-2"> 
     <MenuItem eventKey={'placeholder3'}>Placeholder</MenuItem> 
     <MenuItem divider /> 
     <MenuItem eventKey={'placeholder4'}>Placeholder</MenuItem> 
     </NavDropdown> 

     <NavDropdown eventKey={'dropdown3'} title="DropDown3" id="basic-nav-dropdown-3"> 
     <MenuItem eventKey={'placeholder5'}>Placeholder</MenuItem> 
     <MenuItem divider /> 
     <MenuItem eventKey={'placeholder6'}>Placeholder</MenuItem> 
     </NavDropdown> 
    </Nav> 
    </Navbar.Collapse> 
</Navbar> 

私が直面しています問題はDropdown1は、ドロップダウンを示すことです。 ChromeToolsを使用して問題を確認すると、他の2つのプルダウンで「開いた」クラスが追加されていないようです。

アドバイスはありますか？

Answer 1

あなたのNavDropdownコンポーネント自体には、イベントキーがありません。タイトルとID値があります。

<NavItem eventKey={1}>NavItem 1</NavItem> 
    <NavItem eventKey={2}>NavItem 2</NavItem> 

    <NavDropdown eventKey={3} title="Dropdown1" id="basic-nav-dropdown"> 
    <MenuItem eventKey={3.1}>Placeholder</MenuItem> 
    <MenuItem divider /> 
    <MenuItem eventKey={3.2}>Placeholder</MenuItem> 
    </NavDropdown> 

    <NavDropdown eventKey={4} title="Dropdown2" id="basic-nav-dropdown-2"> 
    <MenuItem eventKey={4.1}>Placeholder</MenuItem> 
    <MenuItem divider /> 
    <MenuItem eventKey={4.2}>Placeholder</MenuItem> 
    </NavDropdown>