反應NavDropdown隱藏點擊任何MenuItem

Question

你好，我正在使用react bootstrap，NavDropdown。 我在我的應用程序中有一個Navbar，我想將NavDropdown放在Navbar中，但NavDropdown的默認行爲隱藏了下拉單擊任何地方。

解決方案我已經使用：

evt.preventDefault(); 
evt.stopPropagation(); 

以上爲我工作無。

我的代碼：

class CustomNavDropdown extends React.Component { 

    constructor(props, context) { 
    super(props, context); 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick(evt) { 
    evt.preventDefault(); 
    evt.stopPropagation(); 
    } 
    render() { 
    return (
     <NavDropdown title={"Dropdown"}> 
     <MenuItem divider /> 
     <MenuItem onClick={this.handleClick}>an item</MenuItem> 
     </NavDropdown> 
    ); 
    } 
} 

所以基本上我的問題是，我NavDropdown隱藏如果我點擊任何地方，我希望它隱藏只有當我點擊<ul>標籤，而不是<li>標籤或者在任何地方應用程序。

Answer 1

我解決如下：

class CustomNavDropdown extends React.Component { 

    constructor(props, context) { 
    super(props, context); 
    this.state = {menuIsOpened: false} 
    this.handleToggle = this.handleToggle.bind(this); 
    } 
    handleToggle(toggle) { 
    //you code here, change state of menuIsOpened if you want to open or close 
    } 
    render() { 
    return (
     <NavDropdown title={"Dropdown"} open={this.state.menuIsOpened} onToggle={this.handleToggle}> 
     <MenuItem divider /> 
     <MenuItem onClick={this.handleClick}>an item</MenuItem> 
     </NavDropdown> 
    ); 
    } 
} 

我把事件onToggle這是由NavDropdown支持，然後我們可以處理handleToggle事件，並盡一切與它在那裏切換是布爾值。