问题描述
在使用React、Tailwind CSS和DaisyUI构建响应式导航栏时，通常会利用DaisyUI的drawer组件来实现移动端的侧边抽屉菜单。当用户在移动设备上打开抽屉菜单，并通过菜单内的react-router-dom 组件跳转到新页面时，会发现抽屉菜单依然保持打开状态，这会影响用户体验。其根本原因在于，drawer组件的打开/关闭状态由一个隐藏的input[type="checkbox"]控制，而页面跳转并不会自动重置这个checkbox的状态。
以下是常见的抽屉导航结构：
{/* Navbar content */}{/* 抽屉侧边栏内容 */}{/* ... 其他导航元素 ... */}{/* 页面内容 */} {children}Games Hardware {/* ... 其他链接 ... */}
{/* 侧边栏链接 */}
- Games
- Hardware
{/* ... 其他链接 ... */}
在上述代码中，input元素的id="my-drawer-3"与label元素的htmlFor="my-drawer-3"建立了关联，点击label即可切换input的checked状态，从而控制抽屉的显示与隐藏。
解决方案
为了解决抽屉在页面跳转后不自动关闭的问题，我们可以在每个导航链接被点击时，手动触发抽屉开关的点击事件，使其关闭。这可以通过直接操作DOM元素来实现。
实现步骤
- 识别抽屉开关的ID：找到控制抽屉打开/关闭的input[type="checkbox"]元素的ID。在上述示例中，该ID是"my-drawer-3"。
- 添加onclick事件处理器：在所有用于导航的组件上（无论是在主导航栏还是在抽屉侧边栏中），添加一个onclick事件处理器。
- 触发点击事件：在onclick处理器中，通过document.getElementById()获取到抽屉开关的DOM元素，并调用其click()方法。
示例代码
将以下onclick事件处理器添加到你的组件中：
onclick={() => { document.getElementById("my-drawer-3").click(); }}例如，修改后的导航链接如下所示：
{ document.getElementById("my-drawer-3").click(); }}
id='a'
className='mr-20 a'
>
Games
{ document.getElementById("my-drawer-3").click(); }}
id='a'
className='mr-20 a'
>
Hardware
请确保将此处理器应用到所有可能导致页面跳转并希望关闭抽屉的组件上，包括主导航栏中的链接（如果它们在抽屉展开时可见并可点击）以及侧边抽屉菜单中的所有链接。
注意事项与最佳实践
ID的唯一性：确保input[type="checkbox"]的id在整个文档中是唯一的，这是document.getElementById()正常工作的前提。
-
代码复用：如果链接数量很多，可以考虑将这个onclick逻辑封装成一个函数，或者创建一个自定义的NavLink组件来统一处理。
const closeDrawer = () => { const drawerToggle = document.getElementById("my-drawer-3"); if (drawerToggle) { drawerToggle.click(); } }; // 在Link组件中使用 Games -
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 (); }{/* ... */}{/* ... */}-
Games
{/* ... */}
- Games {/* ... */}
使用useRef可以避免全局查询DOM，更符合React的组件化思想，并且在组件卸载后，对ref.current的访问也会更安全。
总结
通过在react-router-dom的组件上添加一个简单的onclick事件处理器，并利用document.getElementById().click()（或更推荐的useRef方式）来程序化地触发DaisyUI抽屉开关的点击事件，我们可以有效地解决页面跳转后抽屉菜单不自动关闭的问题。这个方法简单直接，能够显著提升用户在移动设备上使用导航的体验。在实际开发中，根据项目的复杂度和团队偏好，可以选择最适合的DOM操作方式。
