React NavDropdown verbirgt sich beim Klicken auf ein beliebiges MenuItem

Question

Hallo Ich benutze react bootstrap, NavDropdown. Ich habe eine Navbar in meiner Anwendung, und ich möchte NavDropdown in Navbar, aber das Standardverhalten von NavDropdown verbirgt das Dropdown auf Klick irgendwo.

Lösungen die ich verwendet habe:

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

Keines der oben für mich arbeitet.

Mein Code:

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> 
    ); 
    } 
} 

mein Problem Also im Grunde ist, dass meine NavDropdown versteckt, wenn ich auf eine beliebige Stelle, ich kann es nur verstecken will, wenn ich auf dem <ul> Tag klicken, nicht die <li> Tag oder anderswo in die Anwendung.

Answer 1

I wie folgt gelöst:

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> 
    ); 
    } 
} 

I Veranstaltung onToggle Aufmachungen, die von NavDropdown unterstützt wird und dann können wir die Veranstaltung in handleToggle und tun, was mit ihm umgehen, wo Toggle boolean ist.