有条件地渲染图像时 React 中的图像闪烁问题

Image flickering issue in React when image is conditionally rendered

我有一个 header,我想在鼠标悬停在 header 上时在其右侧显示一个图像。

现在,当我将鼠标悬停在 header 上时,编辑模式设置为 true 并显示图像,当我将光标移出 header 时,editMode 设置为 false 并且图像消失。

我正在维护一个变量 editMode 的状态,该状态设置为 true/false 有条件地使用 onMouseOver 和 onMouse 渲染图像:

问题:当我将鼠标悬停在编辑图标上时,它开始闪烁。

class TempComponent extends React.Component {
constructor() {
    super()
    this.editModeToggler = this.editModeToggler.bind(this)
    this.state = {
        editMode: false
    }
}

editModeToggler() {
    console.log('called')
    this.setState({editMode: !this.state.editMode})
}

render() {
  return(
    <div>
      <h3
        onMouseOut={this.editModeToggler} 
        onMouseOver={this.editModeToggler}
      >
        Title
      </h3>
      {this.state.editMode?
            <img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
        :
        null
      }
    </div>
  )
 }
}

您可以在此处找到此代码 运行:http://jsfiddle.net/Lu4w4v1c/2/

如何停止这种闪烁。 我也尝试过按照建议使用 onMouseEnter 和 onMouseLeave here 但它没有用。我不知道如何使用这两个事件导致与我想要的相反。第一次加载组件时,一切都很好,但是一旦我将鼠标悬停在图标上,整个动态就会发生变化。当鼠标不在 header 上时图标显示,当鼠标在 header 上时不显示。请帮助

onMouseEnter 和 onMouseLeave 的代码到此结束:http://jsfiddle.net/Lu4w4v1c/3/

当你在 h3 上有监听器时,最初图像没有被渲染,所以第一次一切似乎都工作正常,但是一旦图像被渲染并且你将鼠标悬停在图像上它响应的 mouseout 事件标题并立即隐藏图像,这反过来会触发 h3 上的鼠标悬停,导致闪烁行为。

要解决您的问题,您只需将侦听器附加到容器上即可。将您的 fiddle http://jsfiddle.net/Lu4w4v1c/4/ 更新为

<div  onMouseOut={this.editModeToggler} 
    onMouseOver={this.editModeToggler}>
  <h3>
    Title
  </h3>
  {this.state.editMode?
        <img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
    :
    null
  }
</div>

如果您有一个容器要执行 onmouseover 事件并在其中呈现 div,您应该使用 onMouseLeave。示例小提琴也有 onmouseleave。

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout

这说明了问题