时间戳

首页 > 解决方案 > Reactstrap - 在 NavLink 上折叠导航栏点击仅在移动设备上

reactjs - Reactstrap - 在 NavLink 上折叠导航栏点击仅在移动设备上

问题描述

我有一个在桌面上打开并在移动设备上折叠的导航栏。我可以在移动设备上单击 NavbarToggler 来打开导航栏。当我在移动设备上单击 NavLink 时，我希望导航栏再次折叠。我为 NavLink 添加了一个 onclick() 切换功能，该功能在移动设备上运行良好，但现在桌面上的 Navbar 将折叠并在我单击 Navlink 时再次打开后立即折叠。有没有办法让导航栏始终在桌面上打开，并在点击移动设备上的导航链接时折叠？

const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); toggle()}}>Home</NavLink>
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

标签： reactjsreact-bootstrap

解决方案

有几种方法可以在 javascript 中完成。您可以评估userAgent 以检查用户正在使用什么设备，或者您可以使用视口/文档尺寸作为切换是否触发的条件。

例如：


const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

const mobileToggle = () => {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   setIsOpen(!isOpen);
  };
};

<Navbar color="light" light expand="md">
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
    <Nav className="mr-auto" navbar>
      <NavItem>
        <NavLink data-toggle="collapse" onClick={() => {history.push("/"); mobileToggle()}}>Home</NavLink>            {/* <---- change this to mobileToggle too*/}
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

推荐阅读