我试图在元素失去焦点时触发一个函数，但似乎在我的 React 应用程序中无法识别模糊事件。我不清楚我错过了什么。下面的 sn-p 就在我的组件中的 return 方法之上。
我的 div 带有 ref {infoWindow}。目前，当我在 div 窗口内单击然后退出时，console.log 没有输出任何内容。
const infoWindow = useRef<HTMLDivElement>(null);
if (infoWindow.current) {
infoWindow.current.addEventListener('blur', (event) => {
console.log(`We've been blurred`);
});
}
【问题讨论】：
标签： javascript reactjs
这不是你在 React 中引入副作用的方式，向元素添加事件监听器是一种副作用，应该在 useEffect 中创建副作用。
这是您的代码的问题
const infoWindow = useRef<HTMLDivElement>(null);
// assume your component gets rendered once - at the initial render the component is not mounted in dom yet
// then infoWindow.current is null, and an event listener will not be added. This is what is probably happening with you.
// assume your component is rendered 1000 times, then you will add 999 event listeners, which is definitely not what you want
if (infoWindow.current) {
infoWindow.current.addEventListener('blur', (event) => {
console.log(`We've been blurred`);
});
}
解决办法是使用useEffect
useEffect(() => {
if (infoWindow.current) {
const handler = (event) => {
console.log(`We've been blurred`);
}
// notice that i get a reference to the element here, so i can safely use it in the clean function
const element = infoWindow.current
element.addEventListener('blur', handler);
// this is a clean function that will be called to clear the side effects you just introduced
return () => element.removeEventListener('blur', handler);
}
}, [])
编辑 上面说的是对的，但是你还有一个问题，div元素默认不接收焦点事件，所以不会模糊。如果你想让一个元素模糊和聚焦，然后添加 tabIndex 到它，所以在你的 div 上做
<div tabIndex={0}>...</div>
【讨论】：
为什么不直接在 div 中添加一个 onBlur 事件监听器？
https://reactjs.org/docs/accessibility.html#mouse-and-pointer-events
【讨论】：