Как сгенерировать событие onMouseLeave в React?

Question

[monochromer]

Всем здоровья!
Есть элемент "Message", на который навешивается некоторая логика по событию onMouseEnter и убирается по onMouseLeave. При этом внутри есть другой элемент - "Dropdown". При закрытии этого dropdown'a хочется, чтобы срабатывало событие onMouseLeave, если курсор не над элементом "Message" после закрытия dropdown'а. Как у Slack.

Демо - https://codepen.io/monochromer/pen/NWPrvze?editors=0010

Answer 1

[Дмитрий]

Как вариант:

1. Добавьте div-у событие onMouseMove, в нем запоминайте координаты мышки

onMouseMove={e => { this.mouse = { clientX: e.clientX, clientY: e.clientY }} }

2. В процедуре close Проверяйте координаты и вызывайте disable в случае выхода за них

const rect = document.querySelector('.Message').getBoundingClientRect()
if (this.mouse.clientX < rect.left || 
  this.mouse.clientX > rect.right || 
  this.mouse.clientY < rect.top ||
  this.mouse.clientY > rect.bottom) {
  this.disable()
}

Строка
document.querySelector('.Message')

просто для примера, искать по хорошему надо через ref

https://codepen.io/dimoff66/pen/zYxBQvo?editors=0010

Comments

[Петр Мухуров]

Есть подозрение, что в this.mouse будет не очень хорошо, поскольку React использует обертку SynteticEvent, которая сдыхает сразу после всплытия. Если нужен ивент позже - нужно вызывать event.persist().
P. S. Возможно, я соврал

[Дмитрий]

Петр Мухуров, Скорей всего соврали, потому что работает. Но можно вместо this.mouse = e использовать

this.mouse = { clientX: e.clientX, clientY: e.clientY }

[Петр Мухуров]

Дмитрий, видимо, не вру
codesandbox

[Дмитрий]

Петр Мухуров, В конце моего ответа есть ссылка на работающий код на codepen

[Петр Мухуров]

Дмитрий, я посмотрел на этот работающий код и мне нечего сказать, кроме как выругаться

[Дмитрий]

Петр Мухуров, Почему?

[monochromer]

Спасибо. Только можно обойтись без MouseMove, проверяя координаты в момент закрытия:

close = (e) => {
    const { clientX: x, clientY: y } = e;
    const rect = this.messageNodeRef.getBoundingClientRect();
    if ([x < rect.left, x > rect.right, y < rect.top, y > rect.bottom ].some(x => x)) {
      this.disable();      
    }
    this.setState({ open: false });
  }