React onhover切换div内的html

Question

我有一个带有一些切换功能的 div

  <div className={styles.divStyle} onMouseEnter={this.hover} onMouseOut={this.hover}>

这是函数

  constructor(props) {
    super(props);
    this.state = {
      isToggle: false
    };
    this.hover = this.hover.bind(this);
  }

  hover(e) {
    this.setState({
      isToggle: !this.state.isToggle
    });
  }

它的作用是切换该 div 内某些图标的显示隐藏和显示块

<i style={{display: this.state.isToggle ? 'block': 'none'}} class="fa fa-chain"/>

但是每当我将鼠标悬停在 div 内的图标或图像上时，它都会算作鼠标移出，我希望 div 内的项目算作切换功能的 div，我制作了我在代码笔。将鼠标悬停在图像或文本上

https://codepen.io/anon/pen/wjKXqQ

Answer 1

你会想要onMouseLeave：

<section onMouseEnter={this.hover} onMouseLeave={this.hover}>

更新笔：https://codepen.io/acdcjunior/pen/pVjZzg

mouseleave有关事件的更多信息（粗体是我的）：

mouseleave当定点设备（通常是鼠标）的指针移出附加有侦听器的元素时，会触发该事件。

mouseleave和mouseout相似，但不同之处在于mouseleave不起泡和mouseout起泡。
这意味着mouseleave当指针退出元素及其所有后代时会触发，而 mouseout当指针离开元素或离开元素的后代之一时会触发（即使指针仍在元素内）。