代码之家  ›  专栏  ›  技术社区  ›  MoeSattler

React Bootstrap中NavDropdown中的EventKeys

  •  5
  • MoeSattler  · 技术社区  · 10 年前

    我对NavDropdown中的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",
    
    2 回复  |  直到 10 年前
        1
  •  1
  •   MoeSattler    10 年前
        2
  •  -1
  •   Phi Nguyen    10 年前

    上的回调 onSelect 事件将接收2个参数。第一个是事件obj。第二个是EventKey。你可以读进去 doc 。因此,如果要获取事件密钥,应尝试在第二个参数中调用它

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