反应:当元素模糊时触发一个函数

平野

当某个元素失去焦点时,我正在尝试触发一个函数,但是我的React应用似乎无法识别出模糊事件。我不清楚我缺少什么。以下代码段恰好位于我组件内的return方法上方。

我的div带有参考{infoWindow}。目前,当我在div窗口中单击然后退出时,console.log不会输出任何内容。

const infoWindow = useRef<HTMLDivElement>(null);
if (infoWindow.current) {
  infoWindow.current.addEventListener('blur', (event) => {
    console.log(`We've been blurred`);
  });
}
埃卜

这不是在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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

在模糊/焦点事件中,如果下一个焦点位于同一父元素中,如何使模糊不触发?

来自分类Dev

反应:.map不是一个函数

来自分类Dev

反应:当prop函数在另一个函数内部时,不能调用它吗?

来自分类Dev

在已触发js函数的div中添加一个元素(输入)

来自分类Dev

HTML / CSS单击:active或:hover时如何触发另一个元素?

来自分类Javascript

在触发onChange时仅更新列表的第一个元素

来自分类Dev

更改div中的任何复选框时,将触发一个函数

来自分类Dev

单击一个元素会触发另一个元素的点击[JQuery]

来自分类Javascript

反应状态更新仅更新一个元素

来自分类Dev

反应:点击创建一个新的html元素

来自分类Javascript

如果其中任何一个子对象获得焦点,则防止触发模糊事件

来自分类Dev

如何在使用map函数遍历数组时更新一个特定元素的状态

来自分类Dev

每次调用函数Swift 3时移至数组中的下一个元素

来自分类Javascript

反应this.setState不是一个函数

来自分类Dev

反应:_this2.setState不是一个函数

来自分类Dev

反应:AppStore侦听器必须是一个函数

来自分类Dev

反应-TypeError:_this.setState不是一个函数

来自分类Javascript

反应:执行一个函数的次数被称为

来自分类Dev

反应 创建一个返回html的函数

来自分类Dev

反应:this.props.posts.map不是一个函数

来自分类Dev

Vue:在触发setInterval时选择一个选项

来自分类Dev

悬停元素时,使另一个元素出现

来自分类Dev

模糊除div中的一个以外的所有元素

来自分类Dev

在struct元素上调用一个函数,该函数是一个nil指针

来自分类Dev

悬停另一个元素(ReactJS)时如何更改一个元素的样式?

来自分类Dev

悬停一个伪元素时,使另一个伪元素出现?

来自分类Dev

当只有一个子元素时,删除一个伪元素

来自分类Dev

JS:无法单击一个元素来触发单击另一个元素

来自分类Javascript

你怎么能触发的一个重新呈现反应JS组件每分钟?

TOP 榜单

热门标签

归档