React NavDropdownはMenuItemのクリックを隠す

Question

こんにちは私は反応ブートストラップ、NavDropdownを使用しています。 私のアプリケーションにNavbarがあり、NavbarにNavDropdownを入れたいのですが、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> 
    ); 
    } 
} 

を私はNavDropdownによってサポートされているイベントonToggleを設置し、我々はhandleToggleでイベントを処理し、トグルがbooleanのどこで何でも行うことができます。