React onBlur回調(diào)中使用document.activeElement返回body完美解決方案

更新時(shí)間：2023年04月17日 09:32:06 作者：Toretto

這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最開始想實(shí)現(xiàn)一個(gè)功能，點(diǎn)擊img圖標(biāo)后給出購物下拉框CartDropdown，當(dāng)img及CartDropdown失去焦點(diǎn)時(shí)隱藏CartDropdown。

最開始的核心代碼如下：

export default function Cart() {
	const [isCartOpen, setIsCartOpen] = useState(false)
	
	function clickHandler() {
		setIsCartOpen(!isCartOpen)
	}

	function closeCartDropdown() {
            if(!document.querySelector('#cart').contains(document.activeElement)) {
                    setIsCartOpen(false)
            }
	}

	return (
		<div id="cart" className="relative" onBlur={closeCartDropdown}>
			<div tabIndex={0} onClick={clickHandler} className='relative hover:-translate-y-0.5 active:translate-y-0 transition-transform cursor-pointer'>
				<img className='h-14' src="/src/assets/images/shopping_bag.png" alt="shopping bag" />
				<span className='Z-10 text-2xl font-bold absolute left-1/2 -translate-x-1/2 -translate-y-2/3' style={{top:'70%'}}>4</span>
			</div>
			{
				<CartDropdown isCartOpen={isCartOpen}/>
			}
		</div>
	)
}

這個(gè)版本的代碼中在onBlur回調(diào)中使用document.activeElement函數(shù)想要獲取當(dāng)前聚焦的元素，之后通過判斷聚焦的元素是cart組件內(nèi)的來判斷是否需要隱藏cartDropdown，但這里document.activeElement返回的都是body元素。

后面我加入了onFocus函數(shù)，并在其中獲取document.activeElement卻能返回正確的結(jié)果，并且是先觸發(fā)onBlur再觸發(fā)onFocus函數(shù)。這樣就可以確定，在之前的元素失去焦點(diǎn)時(shí)，onBlur函數(shù)被調(diào)用，此時(shí)沒有焦點(diǎn)因此默認(rèn)給在body上；之后onFocus函數(shù)執(zhí)行，此時(shí)新元素獲得焦點(diǎn)，因此可以正常獲取聚焦結(jié)果。

因此在onBlur中想要正確獲取聚焦元素，應(yīng)該在onFocus函數(shù)調(diào)用后，所以可以使用異步函數(shù)來完成這一點(diǎn)。我選取setTimeout來進(jìn)行異步操作，并且成功在onBlur函數(shù)中獲取到了正確的document.activeElement值。

function closeCartDropdown() {
	setTimeout(() => {
             if(!document.querySelector('#cart').contains(document.activeElement)) {
		setIsCartOpen(false)
             }
        }, 0)
}

備注：傳統(tǒng)html中blur事件是不能冒泡的，但react中進(jìn)行了特殊的處理成功模擬了冒泡，因此可以實(shí)現(xiàn)子組件失去焦點(diǎn)，調(diào)用父組件回調(diào)函數(shù)的效果。

到此這篇關(guān)于React onBlur回調(diào)中使用document.activeElement返回body解決方案的文章就介紹到這了,更多相關(guān)React onBlur回調(diào)返回body內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: