在 React 中，onMouseEnter 或 hover 没有按预期工作

IT技术 reactjs hover mouseevent mouseenter mouseleave
2021-05-01 07:19:40

我一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 和 not hover 被多次触发。

如何解决这个问题？谢谢

更新 我以前的代码中有一些东西。创建了一个jsfiddle，它可以工作。对不起大家

2个回答

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

我真的认为您只能在 CSS 中实现这一点。因此，您的组件应该具有简单的className属性，并且该类应该具有以下定义：

.image-hover-opacity:hover {
  opacity: 0.5;
}


class Example extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
    

  render() {
    return(
      <img className="image-hover-opacity" src="http://i.imgur.com/PLKabDV.png" />
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));
.image-hover-opacity:hover {
  opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

其它你可能感兴趣的问题
上一篇Makerbot 智能挤出机喷嘴是否可以互换？ 下一篇将 G 代码转换为 SVG