React onMouseOver не срабатывает

Question

React onMouseOver не срабатывает

0

Я хочу запустить событие, когда мышь перемещается по div.
Я использую React как свою инфраструктуру переднего плана, и, следуя их документам, событие просто не срабатывает.

<div onMouseOver={console.log('onMouseOver')} onMouseOut={console.log('onMouseOut')} className="hidden-xs text-center">
      {productImage}
      {productContent}
</div>

Когда страница загружается, я вижу в консоли полный выход журнала из onMouseOver и onMouseOut, но когда я перемещаю мышь над элементом (div), ничего больше не записывается.

itaied 31 март 2016, в 21:28

Источник

Теги:

javascript

reactjs

onmouseover

2 ответа

0

Чтобы расширить ответ Фила - все, что вы положили в фигурные скобки {}, оценивается во время монтирования компонента. Если вы положите

onMouseOver={console.log(onMouseOver)}

то, когда компонент монтируется, React оценивает выражение, выполняя console.log() который возвращает undefined, поэтому обработчик установлен в undefined.

Если вы положите

onMouseOver={this.handleOnMouseOver}

выражение оценивает ссылку на обработчик, поэтому вы получаете то, что хотите.

Blob 15 сен. 2018, в 19:22

Ещё вопросы

Phi Nguyen · Accepted Answer · 2016-03-31T19-30-00.000Z

вы должны назначить ссылку методов вместо их вызова в регистрах событий. Попробуй это:

handleOnMouseOver: function(e){
  console.log("onMouseOver");
}
....
<div onMouseOver={this.handleOnMouseOver} ..../> // NOTE : don't put () at the end