IT技术 - 有条件地渲染图像时，React 中的图像闪烁问题 - 吾爱随笔录

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

我在设置为 true/false 的状态下维护一个变量editMode
然后我使用 onMouseOver 和 onMouse 事件有条件地渲染图像。

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

我在设置为 true/false 的状态下维护一个变量editMode，有条件地使用 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但它没有用。我不知道如何使用这两个事件导致与我想要的相反。第一次加载组件时，一切都很好，但是一旦我将鼠标悬停在图标上，整个动态就会发生变化。当鼠标不在标题上时显示图标，当鼠标在标题上时不显示。请帮忙

onMouseEnter 和 onMouseLeave 的代码在这里：http : //jsfiddle.net/Lu4w4v1c/3/