css 外部单击时隐藏侧栏组件

zpf6vheq 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(186)

**当用户点击焦点区域以外的任何地方时，我尽可能隐藏此侧边栏。**目前，当我点击焦点区域以外的任何地方时，侧边栏保持打开状态。如果我点击侧边栏中的某个区域，而该区域 * 不是 * 链接，侧边栏将关闭。只是尝试在应用程序的其他地方重新创建这种效果。没有想法在React/JS中实现此效果

谢谢你给我的帮助。

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;

css

来源：https://stackoverflow.com/questions/66626487/hiding-sidebar-component-on-outside-click

2条答案

按热度按时间

ars1skjm1#

为此，您可以创建一个自定义钩子，它将您想要的元素作为参数。
https://codesandbox.io/s/outside-click-hook-uc8bo
我们将元素的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>

我们的钩子看起来像这样：

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;
}

在MouseDown上，我们检查单击的位置是否在所选元素中，并更新isClicked值并返回。

赞(0）回复(0）举报 2022-11-27

a8jjtwal2#

我被黑了，在侧边栏之前添加另一个空的div，并使用CSS绝对位置，并根据需要为侧边栏指定相同的绝对位置和样式。让第一个div具有完整的视图宽度和视图高度。侧边栏可以具有任何您想要的大小，但它的z索引将高于第一个div/同级。在第一个div上添加一个onClick函数来关闭侧边栏，因为当有人在侧边栏之外单击时，将是在第一个div上单击。

赞(0）回复(0）举报 2022-11-27

我来回答

css 外部单击时隐藏侧栏组件

2条答案

相关问题

热门标签

最新问答