需求描述
点击按钮用于检测鼠标是否命中按钮
代码实现
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;效果
文章来源：https://www.toymoban.com/news/detail-652640.html
参考
React好玩的自定义hook-useClickOutSide_哔哩哔哩_bilibili文章来源地址https://www.toymoban.com/news/detail-652640.html
到了这里，关于react实现模拟弹框遮罩的自定义hook的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
