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

Question

我有一个标题，我想显示一个图像在它的右边，当鼠标在标题上。

>

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

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

现在，当我悬停在标题上时，编辑模式设置为true，图像显示出来，当我将光标移出标题时，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://jsfidle.net/lu4w4v1c/2/

我怎么才能阻止这种闪烁。我也尝试过使用onMouseEnter和onMouseLeave，但是没有效果。我不知道是怎么回事，但使用这两个事件的结果与我想要的相反。第一次加载组件时，一切都很好，但当我将鼠标悬停在图标上时，整个动态都发生了变化。当鼠标不在页眉上方时，图标会显示出来，当鼠标在页眉上方时，图标不会显示出来。请帮忙

包含onMouseEnter和onMouseLeave的代码在这里:http://jsfidle.net/lu4w4v1c/3/

Answer 1

如果您有一个容器要执行onmouseover事件以在内部呈现div,那么您应该使用onmouseLeave。示例fiddles也有onmouseleave。

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

这就说明了问题所在

Answer 2

当您在h3上有侦听器时，最初图像不会呈现，所以第一次看起来一切都很好，但是一旦图像呈现并且您悬停在图像上，它就会响应标题的鼠标移出事件并立即隐藏图像，这反过来又触发h3上的鼠标移出，导致闪烁行为。

为了解决问题，您可以简单地在容器上附加侦听器。更新了您的小提琴http://jsfidle.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>