第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

單擊導(dǎo)航鏈接后無(wú)法關(guān)閉全屏菜單

單擊導(dǎo)航鏈接后無(wú)法關(guān)閉全屏菜單

慕神8447489 2023-11-12 22:09:34
問(wèn)題當(dāng)我單擊鏈接時(shí),全屏菜單不想關(guān)閉。如果我使用 html 標(biāo)簽 a 并且一切正常,則 NavLink 元素會(huì)出現(xiàn)此問(wèn)題。這里我有一個(gè)功能,可以讓我在按下其中一個(gè)鏈接時(shí)關(guān)閉。我之前提到過(guò)它僅適用于 href 標(biāo)簽。import { useEffect } from "react";export const useOnClickOutside = (ref, handler) => {  useEffect(() => {    const listener = (event) => {      if (!ref.current || ref.current.contains(event.target)) {        return;      }      handler(event);    };    document.addEventListener("mousedown", listener);    return () => {      document.removeEventListener("mousedown", listener);    };  }, [ref, handler]);};這是主菜單組件const MobileMenu = () => {  const [open, setOpen] = useState(false);  const ref = useRef();  useOnClickOutside(ref, () => setOpen(false));  return (    <MobileMenuWrapper ref={ref}>      <BurgerIcon open={open} setOpen={setOpen} />      <MobileMenuList open={open} setOpen={setOpen}>        <MenuLinks />      </MobileMenuList>    </MobileMenuWrapper>  );};和鏈接組件const MenuLinks = () => {  return (    <>      <ul>        <li>          <NavLink to="/"> Home</NavLink>        </li>        <li>          <NavLink to="/albums">Albums</NavLink>        </li>        <li>          <NavLink to="/addAlbum">Add Album</NavLink>        </li>        <li>          <NavLink to="/about">About</NavLink>        </li>        <li>          <NavLink to="/contact">Contact</NavLink>        </li>      </ul>    </>  );};
查看完整描述

1 回答

?
白板的微信

TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊

經(jīng)過(guò)幾個(gè)小時(shí)的搜索錯(cuò)誤后我解決了它


const [open, setOpen] = useState(false);


  const ref = useRef();

  // on link click change open to false

  useOutsideClick(ref, () => {

    if (open) setOpen(false);

  });


  return (

    <MobileMenuWrapper ref={ref}>

      <BurgerIcon open={open} setOpen={setOpen} />

      <MobileMenuList open={open} setOpen={setOpen}>

        <MenuLinks />

      </MobileMenuList>

    </MobileMenuWrapper>

  );

和鉤子


export const useOutsideClick = (ref, callback) => {

  const handleClick = (e) => {

    if (ref.current && ref.current.contains(e.target)) {

      callback();

    }

  };


  useEffect(() => {

    document.addEventListener("click", handleClick);


    return () => {

      document.removeEventListener("click", handleClick);

    };

  });

};


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 1 回答
  • 0 關(guān)注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)