有条件渲染图像时React中的图像闪烁问题 [英] Image flickering issue in React when image is conditionally rendered

问题描述

我有一个标题，当鼠标悬停在标题上方时，我想在其右侧显示一个图像。

I have a header and I want to show an image on its right when the mouse is over the header.

• 我正在将变量 editMode 维持在设置为true / false的状态

• I am maintaining a variable editMode in the state which is set to true/false

然后我有条件地使用onMouseOver和onMouse事件渲染图像。

Then I am conditionally rendering the image using onMouseOver and onMouse events.

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

Now when I hover over the header, the edit mode is set to true and the image shows up and when I move the cursor out of the header, the editMode sets to false and the image disappears.

我正在将变量 editMode 保持在设置为true / false的状态下，使用onMouseOver和onMouse有条件地渲染图像：

I am maintaining a variable editMode in the state which is set to true/false consditionally rendering the image using onMouseOver and onMouse:

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

Problem: When I hover over the edit icon, it starts flicker.

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/

You can find this code running over here: http://jsfiddle.net/Lu4w4v1c/2/

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

How do I stop this flickering. I have also tried using onMouseEnter and onMouseLeave as suggested here but it did not work. I dont know how but using these two events resulted in opposite of what I want. The first time the component loaded, everything was fine but as soon as I hover over the icon the whole dynamics changes. The icon shows up when the mouse is not over the header and it does not show up when the mouse is over the header. Please help

具有onMouseEnter和onMouseLeave的代码在此处： http://jsfiddle.net/Lu4w4v1c/3/

The code with onMouseEnter and onMouseLeave is over here: http://jsfiddle.net/Lu4w4v1c/3/

推荐答案

在h3上具有侦听器时，最初并未渲染图像，因此第一次看起来一切正常，但是一旦渲染了图像并将鼠标悬停在图像上，它将响应标题的mouseout事件并立即隐藏图像，进而触发将鼠标悬停在h3上会导致闪烁的行为。

When you have the listener on h3, initially the image is not rendered so for the first time everything seems to be working fine, but once the image is rendered and you hover over the image it responds to the mouseout event of the heading and hides the image immediately which in turn triggers a mouseover on the h3 resulting in the flickering behaviour.

要解决您的问题，您只需将侦听器附加到容器上即可。用

To solve your problem you can simply attach the listener on the container. Updated your fiddle http://jsfiddle.net/Lu4w4v1c/4/ with

<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>

这篇关于有条件渲染图像时React中的图像闪烁问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！