EventKeys in NavDropdown in React-Bootstrap

All we need is an easy explanation of the problem, so here it is.

I have a problem with the eventKey thing in NavDropdowns.

var Navigation = React.createClass({

  handleSelect: function(eventKey){
    console.log(eventKey);
  },

  render: function() {
    return (
      <Navbar brand='Navbar' toggleNavKey={0}>
        <CollapsibleNav eventKey={0} onSelect={this.handleSelect}>

          <Nav navbar>
            <NavItem eventKey={1}>Home</NavItem>
          </Nav> 


          <Nav navbar right hide>
            <NavItem eventKey={2}>Login</NavItem>

            <NavDropdown eventKey={3} title='NavDropdown' id='basic-nav-dropdown'>
              <MenuItem eventKey={4}>Action 1</MenuItem>
              <MenuItem eventKey={5}>Action 2</MenuItem>
            </NavDropdown>
          </Nav>

        </CollapsibleNav>
      </Navbar>

    )
  }
});

I want to be able in my selectHandler to tell what Nav element was clicked.
This works great for all elements except the NavDropdown:

Clicking the Dropdown does not trigger the selectHandler, which is fine.
But when I click one of the MenuItem, instead of giving me the eventKey, it gives me an event object.

How can I modify the NavDropdown so that it gives me the eventKey?


Edit: My versions are:

"react": "^0.14.0-beta3",
"react-bootstrap": "^0.25.100-react-pre.0",

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

It is a bug in react-bootstrap

https://github.com/react-bootstrap/react-bootstrap/issues/1268

Method 2

The callback on onSelect event will receive 2 params. The first one is event obj. The second is EventKey. You can read it in doc. So if you want to get event key, you should try to call it in the second param

handleSelect: function(event,eventKey){
 console.log(event)
console.log(eventKey);
 },

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply