网站建设logo,网站管理员怎样管理员权限,商务网站开发基本流程,网络服务公司是做什么的需求描述
点击按钮用于检测鼠标是否命中按钮
代码实现
import React from react;
import {useState, useEffect, useRef} from react;// 封装一个hook用来检测当前点击事件是否在某个元素之外
function useClickOutSide(ref,cb) {useEffect((){const handleClickOutside…需求描述
点击按钮用于检测鼠标是否命中按钮
代码实现
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 (divbuttonref{refObj}onClick{() {setVisible(true);}}打开/button{visible div classNamedialog我是弹框的内容/div}/div);
}export default Dialog;
效果 参考
React好玩的自定义hook-useClickOutSide_哔哩哔哩_bilibili
