reactjs - 在 React 中，onMouseEnter 或悬停无法按预期工作

Question

我有一张开头为 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解决方案，当我将鼠标悬停在图像上时，更改不透明度属性。但问题是相同的:当我在图像内移动鼠标时，会多次触发 :hover 和非悬停。

如何解决这个问题？谢谢

<小时/>

更新我之前的代码中有一些东西。创建了一个jsfiddle ，并且它有效。对不起大家

Answer 1

使用document.querySelector并不是一种非常React的思维方式。您可以尝试这种方法:

• 使用 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>
      }