需求描述
點(diǎn)擊按鈕用于檢測(cè)鼠標(biāo)是否命中按鈕
代碼實(shí)現(xiàn)
import React from 'react';
import {useState, useEffect, useRef} from 'react';
// 封裝一個(gè)hook用來(lái)檢測(cè)當(dāng)前點(diǎn)擊事件是否在某個(gè)元素之外
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);
}}
>打開(kāi)</button>
{visible && <div className="dialog">我是彈框的內(nèi)容</div>}
</div>
);
}
export default Dialog;效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-652640.html
參考
React好玩的自定義hook-useClickOutSide_嗶哩嗶哩_bilibili文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-652640.html
到了這里，關(guān)于react實(shí)現(xiàn)模擬彈框遮罩的自定義hook的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
