Как в React сделать задержку onMouseEnter?

Question

[zjoin]

Люди, вообщем есть такое положение дел:

toggleHover() {
    this.setState({ hover: !this.state.hover });
  }

Делаю ивент:

onMouseEnter={this::this.toggleHover} onMouseLeave={this::this.toggleHover}>

Как сделать сделать задержку или плавное элемента?

Answer 1

[Никита Гущин]

Я только рекомендую сделать эту функцию через debounce (или аналоги):

constructor(props) {
    super(props);
    const finalMouseDelay = props.mouseDelay || 300;
    
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.toggleHover = _.debounce(this.toggleHover.bind(this), finalMouseDelay);
    
    this.state = { hover: false };
  }

  handleMouseLeave() {
    this.toggleHover(false);
  }
  
  handleMouseEnter() {
    this.toggleHover(true);
  }

  toggleHover(to) {
    this.setState({ hover: to });
  }

Рабочий пример тут - jsfiddle.net/yuvuyrhv/24

Иначе у Вас будут дикие лаги, если пользователь навел мышку\убрал мышку\снова навел ... с интервалом быстрее, чем заданный вами

Comments

[zjoin]

Круто, спасибо, а с чем связаны лаги? C Dom?

[Никита Гущин]

zjoin: нет, логика не правильная. Если вы просто используете таймаут: вы через каждые 500мс (например) меняете состояние hover на противоположное. И в итоге если я навел\убрал\навел быстро у Вас через 1) 500мс hover = true 2) 510ms hover = false 3) 520ms hover = true - т.е. все "моргает"

Answer 2

[Денис Инешин]

1. Задержка делается с помощью банального setTimeout.
2. Если вам нужно какое-то плавное появление состояния hover. То тут вам помогут CSS-анимации.

toggleHover() {
    setTimeout(function () {
        this.setState({ hover: !this.state.hover });
    }.bind(this), 500);
}

Comments

[zjoin]

Да, просто не знаю как в состояние поставить setTimeout

[Денис Инешин]

zjoin: добавил пример.

[zjoin]

Денис Инешин Спасибо, я вроде так делал, но сейчас заработало