react实现模拟弹框遮罩的自定义hook

需求描述

点击按钮用于检测鼠标是否命中按钮

代码实现

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

// 封装一个hook用来检测当前点击事件是否在某个元素之外
function useClickOutSide(ref,cb) {
	useEffect(()=>{
		const handleClickOutside = (e) => {
			if(ref.current && ref.current !== e.target){
				cb(); 
			}
		}
		document.addEventListener('click',handleClickOutside);
		return () => document.removeEventListener('click', handleClickOutside);
	},[cb, ref]);
}


function Dialog() {
	const [visible, setVisible] = useState(false);
	const refObj = useRef(null);
	useClickOutSide(refObj,()=>{setVisible(false);} );
	return (
		

			 {
					setVisible(true);
				}}
			>打开
			{visible && 
我是弹框的内容
}
		
	);
}

export default Dialog;

效果

参考

React好玩的自定义hook-useClickOutSide_哔哩哔哩_bilibili