React onBlur回調中使用document.activeElement返回body完美解決方案

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

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

最開始想實現(xiàn)一個功能，點擊img圖標后給出購物下拉框CartDropdown，當img及CartDropdown失去焦點時隱藏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>
	)
}

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

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

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

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

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

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

您可能感興趣的文章: