侧边栏壁纸
博主头像
江祎铭博主等级

不知江月待何人

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

目 录CONTENT

文章目录

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

江祎铭
2023-07-25 / 1 评论 / 0 点赞 / 1,099 阅读 / 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
广告 广告

评论区