当光标快速移动在React JS中的组件上时，如何管理状态值

Question

我试图设置光标是否超过组件时。

toggleIcon = () => {
        this.setState({ isMouseOver: !this.state.isMouseOver });
    };
...
<div
     onMouseEnter={() => this.toggleIcon()}
     onMouseLeave={() => this.toggleIcon()}
>
    {isMouseOver ? (
                    <InfoIcon />
                ) : (
                    <NormalIcon />
                )}
</div>

当我以正常速度移动光标时，它可以很好地工作。

但是，如果我快速移动光标，则仅触发onMouseEnter事件，但没有触发onMouseLeave事件。顺便说一句，InfoIcon也没有更改为NormalIcon，即使光标也没有超过该组件。

如果toggleIcon函数中没有状态管理，即使光标在组件上快速移动，也会触发两个事件。

请教我有什么问题以及我该如何解决。谢谢。：(

Answer 1

您可以使用：悬停效果以更改背景图像。

Answer 2

尝试明确通过所需的状态而不是切换。

toggleIcon = isMouseOver => this.setState({ isMouseOver });
...
onMouseEnter={() => this.toggleIcon(true)}
onMouseExit={() => this.toggleIcon(false)}

Answer 3

const NormalIcon = () => (<div> Normal </div>)
const InfoIcon = () => (<div> Info </div>)
class Thing extends React.Component {
  state = { isMouseOver: false };
  
  toggleIcon = () => this.setState(prevState => ({ isMouseOver: !prevState.isMouseOver }));
  render = () => {
    const { isMouseOver } = this.state;
    
    return (
      <div
        onMouseEnter={this.toggleIcon}
        onMouseLeave={this.toggleIcon}
      >
        {isMouseOver ? <InfoIcon /> : <NormalIcon />}
      </div>
    )
  }
}
ReactDOM.render(<Thing />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

看起来正常工作。我更改了您的setState在toggleIcon中使用一个函数而不是对象，但是除此之外，看起来还不错...