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>

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

1 个答案: