甘肃建设厅官方网站项目负责人,网站建设及规划,flash网站设计作品,明星个人flash网站源码文章目录 1、点击框外隐藏弹窗hook 1、点击框外隐藏弹窗hook
**描述#xff1a;**有一个需要自己封装弹窗的组件#xff0c;实现点击弹窗框外时隐藏弹窗 代码#xff1a; import { useEffect } from “react”;
// 点击框外hooks
import { useEffect } from react**有一个需要自己封装弹窗的组件实现点击弹窗框外时隐藏弹窗 代码 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
...)
...
