React 中 NavDropdown 中的 EventKeys-Bootstrap

Question

我对 NavDropdowns 中的 eventKey 有疑问。

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>

    )
  }
});

我希望能够在我的 selectHandler 中判断单击了哪个 Nav 元素。这适用于除 NavDropdown 之外的所有元素：

单击下拉菜单不会触发 selectHandler，这很好。但是当我单击其中一个 MenuItem 时，它没有给我 eventKey，而是给我一个事件对象。

如何修改 NavDropdown 以便它为我提供 eventKey？

编辑：我的版本是：

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

Answer 1

onSelect 事件的回调将接收 2 个参数。第一个是事件对象。第二个是事件键。您可以在 doc 中阅读它。所以如果你想获取事件键，你应该尝试在第二个参数中调用它

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

Answer 2

这是react中的一个bug-bootstrap

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

React 中 NavDropdown 中的 EventKeys-Bootstrap

EventKeys in NavDropdown in React-Bootstrap

reactjs

react-bootstrap