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

我有一个标题，我想在鼠标位于标题上方时在其右侧显示一个图像

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

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

现在，当我将鼠标悬停在标题上时，编辑模式设置为true，图像显示，当我将光标移出标题时，编辑模式设置为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>
  )
 }
}

类TempComponent扩展了React.Component{
构造函数（）{
超级（）
this.editModeToggler=this.editModeToggler.bind（this）
此.state={
编辑模式：false
}
}
editModeToggler（）{
console.log（'called'）
this.setState（{editMode:！this.state.editMode}）
}
render（）{
返回(
标题
{this.state.editMode？
:
无效的
}
)
}
}

您可以在此处找到运行的代码：

我该如何阻止这种闪烁我也尝试过按建议使用onMouseEnter和onMouseLeave，但没有效果。我不知道如何，但使用这两个事件会导致与我想要的相反的结果。第一次加载组件时，一切正常，但当我将鼠标悬停在图标上时，整个动态都发生了变化。当鼠标不在标题上方时，图标会显示，当鼠标位于标题上方时，图标不会显示。请帮忙

---

onMouseEnter和onMouseLeave的代码在这里：

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

要解决问题，只需将侦听器附加到容器上即可。更新了你的小提琴

标题
{this.state.editMode？
:
无效的
}

如果您有一个容器要执行onmouseover事件，该事件在其中呈现一个div，那么您应该使用onMouseLeave。小提琴的例子也有一个例子

---

这说明了问题所在

我不知道为什么，但您的解决方案在小提琴中工作，而不是在我的代码库中：p。你知道为什么mouseEnter和mouseLeave事件不起作用吗？我也写了解释。“当您将鼠标悬停在图像上时，它会响应标题的mouseout事件并立即隐藏图像，从而触发h3上的鼠标悬停，导致闪烁行为。”

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