React?onBlur回調中怎么使用document.activeElement返回body

這篇文章主要講解了“React onBlur回調中怎么使用document.activeElement返回body”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“React onBlur回調中怎么使用document.activeElement返回body”吧！

最開始想實現一個功能，點擊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函數想要獲取當前聚焦的元素，之后通過判斷聚焦的元素是cart組件內的來判斷是否需要隱藏cartDropdown，但這里document.activeElement返回的都是body元素。

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

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

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

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

感謝各位的閱讀，以上就是“React onBlur回調中怎么使用document.activeElement返回body”的內容了，經過本文的學習后，相信大家對React onBlur回調中怎么使用document.activeElement返回body這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！