悬停在元素上时如何触发状态更改

Question

我基本上想在用户将鼠标悬停在该组件上时触发组件状态的更改。

由于 onMouseEnter 和 onMouseLeave 在某些条件下无法正常工作 (https://github.com/facebook/react/issues/6807)，是否有替代方案？

编辑： 我认为这与重新渲染有关。当组件属于同一类型但我强制重新渲染时，它会导致相同的问题。

class onHover extends Component {

  constructor(props) {
    super(props);
    this.state = {
      bool: false,
    }
  }

  render() {
    return (
      <div onMouseEnter={() => this.setState({ bool: true })} onMouseLeave={() => this.setState({ bool: false })}>
        {
          this.state.bool ? (
            <div key={Math.random()}>[OPTION1] show after onMouseEnter</div>
          ) : (
            <div key={Math.random()}>[OPTION2] show after onMouseLeave</div>
          )
        }
      </div>
    )
  }
}

Answer 1

来自文档：

onMouseEnter 和 onMouseLeave 事件从元素传播 留给正在输入的人，而不是普通的冒泡和 没有捕获阶段。

尝试使用 onMouseOut、onMouseOver 代替

<div onMouseOver={() => this.setState({ bool: true })} onMouseOut={() => this.setState({ bool: false })}>
  {
    this.state.bool ? (
      <span>[OPTION1] show after onMouseEnter</span>
    ) : (
      <div>[OPTION2] show after onMouseLeave</div>
    )
  }
</div>