Question

我正在使用react-sensitive-navbar（https://github.com/stephanieinez/react-responsive-navbar），并尝试将打开的导航栏设置为单击菜单项后自动关闭。

有一个未解决的问题，仅需一个回答就可以问同样的问题，它提供了我未能成功实现的解决方案。

在选择菜单项后，演示（https://stephanieinez.github.io/react-responsive-navbar/）实际上确实关闭了，但这在生产版本中不会发生。

代码：

import React, { Component } from 'react';

import ResponsiveMenu from 'react-responsive-navbar';

class Example extends Component {
  render() {
    return (
      <ResponsiveMenu
        menuOpenButton={<div />}
        menuCloseButton={<div />}
        changeMenuOn="500px"
        largeMenuClassName="large-menu-classname"
        smallMenuClassName="small-menu-classname"
        menu={
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
          </ul>
        }
      />
    );
  }
}

Answer 1

问题似乎可能是因为您的lis中没有任何<a href=""></a>属性。

该示例在单击时关闭的原因是，您单击的是一个空的href，因此它将重定向到其自身并刷新页面。

如果要链接到单独的页面，则该页面将在重定向页面后立即关闭，因为默认菜单已关闭。

您应该能够执行此操作，它将触发handleClick函数来切换菜单。

<ResponsiveMenu
    menuOpenButton={<div />}
    menuCloseButton={<div />}
    changeMenuOn="500px"
    largeMenuClassName="large-menu-classname"
    smallMenuClassName="small-menu-classname"
    menu={
      <MenuItem onClick={this.handleClick} component={Link} to='{Your UR}'>Item 1</MenuItem>
      <MenuItem onClick={this.handleClick} component={Link} to='{Your UR}'>Item 2</MenuItem>
      <MenuItem onClick={this.handleClick} component={Link} to='{Your UR}'>Item 3</MenuItem>
      <MenuItem onClick={this.handleClick} component={Link} to='{Your UR}'>Item 4</MenuItem>
    }
  />

单击菜单项后如何自动关闭React Responsive Navbar？

1 个答案: