如何在React和DaisyUI中实现页面跳转后自动关闭导航抽屉

问题描述

在使用React、Tailwind CSS和DaisyUI构建响应式导航栏时，通常会利用DaisyUI的drawer组件来实现移动端的侧边抽屉菜单。当用户在移动设备上打开抽屉菜单，并通过菜单内的react-router-dom <Link>组件跳转到新页面时，会发现抽屉菜单依然保持打开状态，这会影响用户体验。其根本原因在于，drawer组件的打开/关闭状态由一个隐藏的input[type="checkbox"]控制，而页面跳转并不会自动重置这个checkbox的状态。

以下是常见的抽屉导航结构：

<div className="drawer">
  <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content flex flex-col">
    {/* Navbar content */}
    <div className="w-full navbar bg-base-100">
      {/* ... 其他导航元素 ... */}
      <div className="flex-none lg:hidden">
        <label htmlFor="my-drawer-3" className="">
          {/* 汉堡菜单图标 */}
          <HiMenuAlt3 className="btn btn-square btn-ghost w-" />
        </label>
      </div>
      <div className="flex-none hidden lg:block font-semiBold">
        <ul className="menu menu-horizontal">
          <Link to='/' id='a' className='mr-20 a'>Games</Link>
          <Link to='/about-us' id='a' className='mr-20 a'>Hardware</Link>
          {/* ... 其他链接 ... */}
        </ul>
      </div>
    </div>
    {/* 页面内容 */}
    {children}
  </div>
  {/* 抽屉侧边栏内容 */}
  <div className="drawer-side">
    <label htmlFor="my-drawer-3" className="drawer-overlay"></label>
    <ul className="menu p-4 w-80 min-h-full bg-base-200">
      {/* 侧边栏链接 */}
      <li><Link to='/' id='a'>Games</Link></li>
      <li><Link to='/about-us' id='a'>Hardware</Link></li>
      {/* ... 其他链接 ... */}
    </ul>
  </div>
</div>

在上述代码中，input元素的id="my-drawer-3"与label元素的htmlFor="my-drawer-3"建立了关联，点击label即可切换input的checked状态，从而控制抽屉的显示与隐藏。

解决方案

为了解决抽屉在页面跳转后不自动关闭的问题，我们可以在每个导航链接被点击时，手动触发抽屉开关的点击事件，使其关闭。这可以通过直接操作DOM元素来实现。

实现步骤

1. 识别抽屉开关的ID：找到控制抽屉打开/关闭的input[type="checkbox"]元素的ID。在上述示例中，该ID是"my-drawer-3"。
2. 添加onclick事件处理器：在所有用于导航的<Link>组件上（无论是在主导航栏还是在抽屉侧边栏中），添加一个onclick事件处理器。
3. 触发点击事件：在onclick处理器中，通过document.getElementById()获取到抽屉开关的DOM元素，并调用其click()方法。

示例代码

将以下onclick事件处理器添加到你的<Link>组件中：

onclick={() => { document.getElementById("my-drawer-3").click(); }}

例如，修改后的导航链接如下所示：

<Link 
  to='/' 
  onclick={() => { document.getElementById("my-drawer-3").click(); }} 
  id='a' 
  className='mr-20 a'
>
  Games
</Link>

<Link 
  to='/about-us' 
  onclick={() => { document.getElementById("my-drawer-3").click(); }} 
  id='a' 
  className='mr-20 a'
>
  Hardware
</Link>

请确保将此处理器应用到所有可能导致页面跳转并希望关闭抽屉的<Link>组件上，包括主导航栏中的链接（如果它们在抽屉展开时可见并可点击）以及侧边抽屉菜单中的所有链接。

天谱乐

唱鸭旗下AI音乐创作平台，为您提供个性化音乐创作体验！

514

查看详情

注意事项与最佳实践

• ID的唯一性：确保input[type="checkbox"]的id在整个文档中是唯一的，这是document.getElementById()正常工作的前提。

• 代码复用：如果链接数量很多，可以考虑将这个onclick逻辑封装成一个函数，或者创建一个自定义的NavLink组件来统一处理。

  const closeDrawer = () => {
    const drawerToggle = document.getElementById("my-drawer-3");
    if (drawerToggle) {
      drawerToggle.click();
    }
  };
  
  // 在Link组件中使用
  <Link to='/' onClick={closeDrawer} className='mr-20 a'>Games</Link>

  登录后复制

• React的useRef：对于更“React化”的DOM操作，可以使用useRef钩子来获取DOM元素的引用，而不是直接使用document.getElementById。

  import React, { useRef } from 'react';
  
  function MyNavbar() {
    const drawerToggleRef = useRef(null);
  
    const closeDrawer = () => {
      if (drawerToggleRef.current) {
        drawerToggleRef.current.click();
      }
    };
  
    return (
      <div className="drawer">
        <input id="my-drawer-3" type="checkbox" className="drawer-toggle" ref={drawerToggleRef} />
        <div className="drawer-content flex flex-col">
          {/* ... */}
          <div className="flex-none lg:hidden">
            <label htmlFor="my-drawer-3" className="">
              <HiMenuAlt3 className="btn btn-square btn-ghost w-" />
            </label>
          </div>
          {/* ... */}
          <ul className="menu menu-horizontal">
            <Link to='/' onClick={closeDrawer} className='mr-20 a'>Games</Link>
            {/* ... */}
          </ul>
        </div>
        <div className="drawer-side">
          <label htmlFor="my-drawer-3" className="drawer-overlay"></label>
          <ul className="menu p-4 w-80 min-h-full bg-base-200">
            <li><Link to='/' onClick={closeDrawer}>Games</Link></li>
            {/* ... */}
          </ul>
        </div>
      </div>
    );
  }

  登录后复制

  使用useRef可以避免全局查询DOM，更符合React的组件化思想，并且在组件卸载后，对ref.current的访问也会更安全。

总结

通过在react-router-dom的<Link>组件上添加一个简单的onclick事件处理器，并利用document.getElementById().click()（或更推荐的useRef方式）来程序化地触发DaisyUI抽屉开关的点击事件，我们可以有效地解决页面跳转后抽屉菜单不自动关闭的问题。这个方法简单直接，能够显著提升用户在移动设备上使用导航的体验。在实际开发中，根据项目的复杂度和团队偏好，可以选择最适合的DOM操作方式。

以上就是如何在React和DaisyUI中实现页面跳转后自动关闭导航抽屉的详细内容，更多请关注php中文网其它相关文章！