本文旨在解决在react应用中，结合DaisyUI的抽屉式导航（drawer）和react-router-dom进行页面跳转时，导航抽屉不会自动关闭的问题。通过在导航链接上添加一个简单的onclick事件处理器，程序化地触发抽屉开关的点击事件，即可实现在路由切换后自动关闭导航抽屉，从而提升用户体验。
问题描述
在使用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元素来实现。
实现步骤
- 识别抽屉开关的ID：找到控制抽屉打开/关闭的input[type=”checkbox”]元素的ID。在上述示例中，该ID是”my-drawer-3″。
- 添加onclick事件处理器：在所有用于导航的<Link>组件上（无论是在主导航栏还是在抽屉侧边栏中），添加一个onclick事件处理器。
- 触发点击事件：在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>组件上，包括主导航栏中的链接（如果它们在抽屉展开时可见并可点击）以及侧边抽屉菜单中的所有链接。
注意事项与最佳实践
-
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操作方式。
评论（已关闭）
评论已关闭