Javascript 在外部单击时隐藏侧边栏组件
当用户单击焦点区域以外的任何位置时,我会尽力隐藏此侧边栏。 当前,当我单击外部时,侧边栏保持打开状态。如果我点击侧边栏中不是链接的区域,侧边栏将关闭。只是想在应用程序的其他地方重现这种效果。 不知道如何在React/JS中实现这一点 谢谢你给我的任何帮助Javascript 在外部单击时隐藏侧边栏组件,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,当用户单击焦点区域以外的任何位置时,我会尽力隐藏此侧边栏。 当前,当我单击外部时,侧边栏保持打开状态。如果我点击侧边栏中不是链接的区域,侧边栏将关闭。只是想在应用程序的其他地方重现这种效果。 不知道如何在React/JS中实现这一点 谢谢你给我的任何帮助 import React, { useState } from 'react'; import * as FaIcons from 'react-icons/fa'; import * as AiIcons from 'react-icons/
import React, { useState } from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { Link } from 'react-router-dom';
import { NavbarData } from './NavbarData';
import '../styles/Navbar.css';
import { IconContext } from 'react-icons';
import onClickOutsideHOC from "react-onclickoutside"; //<-- Should I be using this?
function Navbar() {
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
const hideSidebar = () => setSidebar(onClickOutsideHOC()); //<-- Should I be using this?
return (
<>
<IconContext.Provider value={{ color: '#fff' }}>
<div className='navbar'>
<Link to='#' className='menu-bars'>
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
<nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={showSidebar}>
<li className='navbar-toggle'>
<Link to='#' className='menu-bars'>
<AiIcons.AiOutlineClose />
</Link>
</li>
{NavbarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>
//Commented Out My Attempt Below
{/* <nav>
<nav className={sidebar ? 'nav-menu inactive' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={hideSidebar}>
<li className='navbar-toggle'>
<Link to='#' className='menu-bars'>
<AiIcons.AiOutlineClose />
</Link>
</li>
{NavbarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>
</nav>*/}
</IconContext.Provider>
</>
);
}
export default Navbar;
import React,{useState}来自“React”;
从“反应图标/fa”导入*作为FAICON;
从“反应图标/ai”导入*作为ai图标;
从'react router dom'导入{Link};
从“/NavbarData”导入{NavbarData};
导入“../styles/Navbar.css”;
从“反应图标”导入{IconContext};
从“react onclickoutside”导入onClickOutsideHOC;//设置侧边栏(!侧边栏);
const hideSidebar=()=>setSidebar(onClickOutsideHOC());//{
返回(
{item.icon}
{item.title}
);
})}
//在下面评论了我的尝试
{/*
-
{NavbarData.map((项目,索引)=>{
返回(
-
{item.icon}
{item.title}
);
})}
*/}
);
}
导出默认导航栏;
为此,您可以创建一个自定义挂钩,将所需元素作为参数。我为你创建了一个沙箱
我们将元素的ref发送到我们创建的自定义挂钩
const boxRef = useRef(null);
// boxOutsideClick will be true on outside click
const boxOutsideClick = OutsideClick(boxRef);
<div ref={boxRef} className="box">
<h1>Click outside of me</h1>
</div>
在mousedown中,我们检查单击的位置是否在所选元素中,并更新isClicked值并返回。这是否回答了您的问题?
export default function OutsideClick(ref) {
const [isClicked, setIsClicked] = useState();
useEffect(() => {
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
setIsClicked(true);
} else {
setIsClicked(false);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
return isClicked;
}