自助建站系统免费加盟网站优化工具

1、点击框外隐藏弹窗hook

**描述：**有一个需要自己封装弹窗的组件，实现点击弹窗框外时隐藏弹窗
代码：
import { useEffect } from “react”;

// 点击框外hooks
import { useEffect } from "react";const useClickOutOfBox = (ref: any, callback: Function) => {const handleClick = (event: MouseEvent) => {if (ref && ref.current && !ref.current.contains(event.target)) {callback(); // 在callBack中放隐藏弹窗的逻辑}};useEffect(() => {document.addEventListener("click", handleClick);return () => {document.removeEventListener("click", handleClick);};});
};export default useClickOutOfBox;

// 使用
import { useState, useEffect } from "react";
import { useClickOutOfBox } from "@/hooks/useClickOutOfBox";
... 
const [visible, setVisible] = useState(false);
const myRef = useRef(null);
myRef  && useClickOutOfBox(myRef, setVisible(false));
return (
...
{visible &&
<div ref={myRef}>
弹窗
</div>
...)
...