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 (
		<div>
			<button
				ref={refObj}
				onClick={() => {
					setVisible(true);
				}}
			>打开</button>
			{visible && <div className="dialog">我是弹框的内容</div>}
		</div>
	);
}

export default Dialog;

效果

参考

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