当前位置: 首页 > 面试题库 >

在React中,onMouseEnter或悬停无法按预期工作

姬雪松
2023-03-14
问题内容

opacity = 1开始我有一张图片。

当鼠标进入图像时,更改opacity = 0.5。当鼠标离开图像时,将不透明度改回来。

这是一个代码:

mouseEnter() {
    console.log('mouse enter')
    const classname = '.' + this.props.post.code
    document.querySelector(classname).classList.add('image-hover-opacity')
}

mouseLeave() {
    console.log('mouse leave')
    const classname = '.' + this.props.post.code
    document.querySelector(classname).classList.remove('image-hover-opacity')
}

    render() {
        <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
    }

当鼠标进入和离开图像时,分别触发onMouseEnter和onMouseLeave良好。但是问题是当我在图像中移动鼠标时,会触发onMouseEnter和onMouseLeave。

我也尝试了css解决方案,当我将鼠标悬停在图像上时,更改了opacity属性。但是问题是一样的:当我在图像中移动鼠标时,:hover和not
hover被多次触发。

如何解决呢?谢谢

更新
我之前的代码中有一些内容。创建了一个jsfiddle,它可以工作。对不起大家


问题答案:

使用document.querySelector不是一种非常反应的思维方式。您可以尝试以下方法

  • 使用div包装纸img来避免这种奇怪的mouseEnter行为
  • this.state不透明使用
        constructor() {
      this.state = {
        opacity: 1
      }
    }

    mouseEnter() {
        console.log('mouse enter')
        this.setState({opacity: 0.5})
    }

    mouseLeave() {
        console.log('mouse leave')
        this.setState({opacity: 1})
    }

        render() {
          <div style={{opacity: this.state.opacity}}>
            <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
          </div>
        }


 类似资料:
  • 问题内容: 我正在使用selenium来抓取一些数据。 我单击的页面上有一个按钮,说“ custom_cols”。此按钮为我打开一个窗口,从中可以选择列。 此新窗口有时需要一些时间才能打开(大约5秒钟)。所以我已经使用了 延迟为20秒。但是有时它无法在新窗口中选择查找元素,即使该元素可见。在其余时间中,这种情况仅发生十次一次。 我在其他地方也使用了相同的功能(WebDriverWait),并且可以

  • 问题内容: 经过测试后,我只能对已经解析过的JSON数据返回一个肯定值。 根据官方文件: isValidJSONObject返回一个布尔值,该布尔值指示是否可以将给定对象转换为JSON数据。 但是,尽管事实是我尝试将其从JSON转换为NSDictionary的对象都可以正常转换,但仍会返回。 这是我的代码: 我的日志包含以下内容: 然后是dict的输出,这是一个巨大的NSMutableDictio

  • 问题内容: 考虑以下可以在任何程序执行之前预加载的库: 问题是,尽管总是调用全局变量的构造函数,但对于某些程序却不调用析构函数,例如: 对于其他一些程序,按预期方式调用析构函数: 您能解释一下为什么在第一种情况下不调用析构函数吗?编辑:上面的问题已得到解答,即程序可能会使用_exit(),abort()退出。 然而: 有没有办法在预加载的程序退出时强制调用给定函数? 问题答案: 具有作为其初始化代

  • 我必须将日期-时间字符串转换为分区日期-时间对象。我使用DateTimeForman读取模式。根据留档,模式中的“Z”可以接受以下格式: /-0000 但是“分区约会”。parse(myDate,formatter)只适用于第一种情况;相反,在第二种情况下,代码生成一个异常。 我用的是8Java 我做错什么了?谢谢!

  • 我编写了自己的AtomicDouble类,还有一个BankAccount类,它执行两个简单的取款和存款操作,它有一个AtomicDouble实例(余额)。我的代码的问题是,当我在deposit()中调用addAndGet方法时,程序会陷入一个无限循环,compareAndSet()永远不会返回真值,但当我调试它时,currentValue和atomic中的值。get()相等,但此方法无法理解。 有

  • 问题内容: 我是python新手,我熟悉循环并尝试了一本书中的示例 但是输出如下 问题答案: 您必须改用(Python 2.x),因为它等效于,因此它会将输入解析并评估为有效的Python表达式。 注意: 不会捕获用户错误(例如,如果用户输入了一些无效的Python表达式)。可以这样做,因为它将输入转换为。有关更多信息,请阅读Python docs 。