Как управлять значениями состояния, когда курсор быстро перемещается над компонентом в 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

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, чтобы использовать функцию вместо объекта, но в остальном это выглядит нормально ...

Answer 2

Вы можете использовать: эффект наведения, чтобы изменить фоновое изображение.

Answer 3

Попытка явно передать нужное вам состояние вместо его переключения.

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