当菜单项子链接处于活动状态时，导航下拉列表未设置为活动

Question

我遇到了这个问题，在选择反应引导导航下拉菜单的菜单项子链接时，导航下拉菜单标题未设置为活动。

1. 我的导航下拉代码：

     <NavDropdown eventKey={4} title="Manage User" id="basic-nav-dropdown">
       <LinkContainer to="/users/add">
         <MenuItem eventKey={4.1}>Add User</MenuItem>
       </LinkContainer>
       <IndexLinkContainer to="/users">
         <MenuItem eventKey={4.2}>View User</MenuItem>
       </IndexLinkContainer>
     </NavDropdown>
   

2. 路线

   <Route path="/users" component={Users}>
     <IndexRoute component={UserList} />
     <Route path="/users/add" component={AddUser} />
     <Route path="/users/:id/edit" component={EditUser} />
   </Route>
   

导航下拉列表标题"管理用户"永远不会设置为活动状态，即使在路由和选择菜单项之后也是如此。

Answer 1

我也面临类似的问题，我是这样解决的。

您需要在<Nav >上定义activeKey prop，此值activeKey这将决定哪个链接处于活动状态。

class Navigation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          activeKey : 0
        }
        this.toggleClass = this.toggleClass.bind(this);
    }
    componentDidMount(){
        if(window.location.pathname === "/users/add") {
          this.setState({ activeKey : 4.1 });
        } else if(window.location.pathname === "/users") {
          this.setState({ activeKey : 4.2 });
        }
    }
    toggleClass(e) {
      if(e.target.pathname === "/users/add") {
        this.setState({ activeKey : 4.1 });
      } else if(e.target.pathname === "/users") {
        this.setState({ activeKey : 4.2 });
      }
    }
    render() {
        return (
            <Navbar inverse fluid collapseOnSelect>
              <Navbar.Collapse>
                <Nav pullRight activeKey={this.state.activeKey}>
                  <NavDropdown eventKey={4} title="Manage User" id="basic-nav-dropdown">
                    <LinkContainer to="/users/add" onClick={this.toggleClass}>
                      <MenuItem eventKey={4.1}>Add User</MenuItem>
                    </LinkContainer>
                    <IndexLinkContainer to="/users" onClick={this.toggleClass}>
                      <MenuItem eventKey={4.2}>View User</MenuItem>
                    </IndexLinkContainer>
                  </NavDropdown>
                </Nav>
              </Navbar.Collapse>
            </Navbar>
        )
    }
}

希望这对你有帮助。

Answer 2

我像这样解决了这个问题：

第一步。我在组件状态下声明了 activeKey，这将决定哪个 NavDropDown 处于活动状态

 constructor(props) {
    super(props);
    this.state = { activeKey: 1 };
 }

第二步。要处理 onSelect 事件的事件处理程序函数。获取事件键将其截断并将其设置为"活动键"状态

 handleSelect = (key) => {
    this.setState({ activeKey: Math.trunc(key) });
 }

第三步，调用上面的函数on选择导航并将"活动键"值传递给活动键属性：

<Nav 
  activeKey={this.activeKey} 
  onSelect={this.handleSelect}> 
</Nav>

而且它运行良好。