需求描述

點擊按鈕用于檢測鼠標是否命中按鈕

代碼實現

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><buttonref={refObj}onClick={() => {setVisible(true);}}>打開</button>{visible && <div className="dialog">我是彈框的內容</div>}</div>);
}export default Dialog;

效果

參考

React好玩的自定義hook-useClickOutSide_嗶哩嗶哩_bilibili