React与DaisyUI：解决导航后抽屉式菜单保持打开的问题

问题描述

在使用react、tailwind css和daisyui构建抽屉式导航菜单，并结合react-router-dom进行页面导航时，常见的问题是当用户点击导航链接跳转到新页面后，抽屉菜单（或侧边栏）并不会自动关闭，而是依然保持打开状态。这会影响用户体验，因为用户可能期望在导航完成后菜单能够自动收起，以展示完整的新页面内容。

DaisyUI的抽屉组件通常依赖一个隐藏的<input type="checkbox" />元素来控制其打开和关闭状态。当这个checkbox被选中时，抽屉打开；未选中时，抽屉关闭。默认情况下，react-router-dom的导航行为并不会自动改变这个checkbox的状态，导致菜单在页面切换后依然保持原状。

以下是原始的抽屉菜单结构示例：

<div class="drawer">
  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" /> 
  <div class="drawer-content flex flex-col">
    <div class="w-full navbar bg-base-100">
      {/* ...其他导航栏内容... */}
      <div class="flex-none lg:hidden">
        <label for="my-drawer-3" class="">
          {/* 菜单打开按钮 */}
          <HiMenuAlt3 className='btn btn-square btn-ghost w-'/>
        </label>
      </div> 
      <div class="flex-none hidden lg:block font-semiBold">
        <ul class="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>

可以看到，id="my-drawer-3"的input元素是控制抽屉开关的关键。

解决方案

解决此问题的核心思路是：在用户点击抽屉菜单内的导航链接时，程序化地触发控制抽屉开关的checkbox的点击事件，从而将其关闭。

具体实现方式是在每个Link组件上添加一个onClick事件处理函数。

苏打办公

360旗下的办公工具导航，优质海量工具

21

查看详情

实现步骤

1. 识别抽屉控制元素： 找到DaisyUI抽屉组件中用于控制其开关的隐藏input type="checkbox"元素的ID。在上述示例中，该ID是my-drawer-3。
2. 添加onClick事件： 对于抽屉菜单内部的所有Link组件，添加一个onClick事件监听器。
3. 触发点击事件： 在onClick处理函数中，通过document.getElementById()获取到该checkbox元素，并调用其click()方法。这将模拟用户点击该checkbox，从而切换抽屉的打开/关闭状态。

示例代码

将以下代码片段添加到您的每个Link组件中：

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

例如，修改后的Link组件将如下所示：

<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>
{/* ...其他导航链接也按此方式修改... */}

通过这种方式，每当用户点击抽屉菜单中的导航链接时，onclick事件会立即触发，模拟点击隐藏的checkbox，从而关闭抽屉菜单，然后react-router-dom才会完成页面导航。这样就确保了在跳转到新页面之前，抽屉菜单已经关闭。

注意事项与最佳实践

• ID的准确性： 确保document.getElementById("my-drawer-3")中的ID与您的DaisyUI抽屉组件中实际控制开关的input元素的ID完全匹配。如果您的抽屉ID不同，请相应地修改代码。
• DOM操作的考量： 尽管这种直接的DOM操作对于解决DaisyUI抽屉的特定问题非常有效和简洁，但在React应用中，通常推荐通过状态管理（如useState）来控制组件的行为，以保持React的声明式编程范式。然而，对于DaisyUI这类基于HTML结构和CSS的组件，直接操作其内部的DOM元素（如隐藏的checkbox）是常见的且实用的解决方案。
• 全局状态管理（进阶）： 对于更复杂的应用，如果抽屉的打开/关闭状态需要在多个组件之间共享或由全局事件控制，可以考虑使用React的Context API或Redux等状态管理库来维护抽屉的打开状态。在这种情况下，抽屉组件本身可能需要被改造为完全由React状态控制的组件。但对于简单的导航关闭需求，上述onClick方法已足够。
• 用户体验： 这种即时关闭菜单的策略通常能提供良好的用户体验，因为它符合用户对导航行为的预期。

总结

通过在DaisyUI抽屉菜单内的Link组件上添加一个简单的onClick事件处理函数，并利用document.getElementById().click()方法，我们可以有效地解决在React应用中使用react-router-dom进行页面导航后，抽屉菜单仍保持打开的问题。这种方法直接、高效，能够显著提升用户在移动设备或小屏幕上的导航体验。

以上就是React与DaisyUI：解决导航后抽屉式菜单保持打开的问题的详细内容，更多请关注php中文网其它相关文章！