侧边栏壁纸
博主头像
江咏之博主等级

江一铭,字咏之,号逍遥居士。襄阳人士也,一介书生耳。喜静少言,不慕荣利,爱好甚广。诗书棋画、赏曲试茶、云游四方皆为嗜之。中闲居无他念,每以品茗自娱。而今已然淡泊名利,致力于生活,虽追理想,但无急功近利,吾辈当先沉稳矣。

  • 累计撰写 174 篇文章
  • 累计创建 3 个标签
  • 累计收到 115 条评论
标签搜索

目 录CONTENT

文章目录

react hook实现点击a显示b,点击别的地方,隐藏b

江咏之
2023-07-25 / 1 评论 / 0 点赞 / 823 阅读 / 1,415 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-25,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告
import React, { useState, useEffect, useRef, forwardRef, ForwardedRef } from 'react';

interface BProps {
  // B元素的其他属性
}

const B = forwardRef((props: BProps, ref: ForwardedRef<HTMLDivElement>) => {
  return (
    <div ref={ref}>
      {/* B元素的内容 */}
    </div>
  );
});

function App(): JSX.Element {
  const [showB, setShowB] = useState<boolean>(false);
  const bRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (bRef.current && !bRef.current.contains(event.target as Node)) {
        setShowB(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <a href="#" onClick={() => setShowB(!showB)}>点击显示/隐藏</a>
      {showB && (
        <B ref={bRef} />
      )}
    </div>
  );
}

export default App;

非TS

import React, { useState, useEffect, useRef } from 'react';

function App() {
  const [showB, setShowB] = useState(false);
  const bRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (bRef.current && !bRef.current.contains(event.target)) {
        setShowB(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <a href="#" onClick={() => setShowB(!showB)}>点击显示/隐藏</a>
      {showB && (
        <div ref={bRef}>
          {/* B元素的内容 */}
        </div>
      )}
    </div>
  );
}

export default App;

0
广告 广告

评论区