当光标在 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

尝试显式传递您想要的状态而不是切换它。

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

Answer 2

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" />

看起来像预期的那样工作。我在 toggleIcon 中更改了您的 setState 以使用函数而不是对象，但除此之外，它似乎还不错...

Answer 3

您可以使用 :hover 效果来更改背景图片。

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

How to manage State values when cursor is moving fast over a component in React JS?

reactjs

event-handling

react-state-management