Обработчик событий внутри тега движения React-Motion игнорируется
Я пытаюсь воссоздать скользящее меню, используя React Motion. Вы можете увидеть мой нерабочий пример здесь: http://codepen.io/kirupa/pen/BQVzvQ (нажмите на синий кружок, чтобы отобразить меню или скрыть его)
Здесь моя проблема. Меню должно исчезнуть, когда вы щелкнете где-нибудь внутри желтой области. Рабочий пример, не связанный с ReactMotion, можно найти здесь: https://www.kirupa.com/html5/examples/slidingmenu.htm
Возвращаемся к React. По какой-то причине мой обработчик событий, прикрепленный к элементу меню внутри тега Motion, игнорируется. Соответствующий фрагмент выглядит следующим образом:
<Motion style={
{
x: spring(this.state.visible ? 0 : -100)
}
}>
{
function({x}) {
return (
<div onMouseDown={this.handleMouseDown} id="flyoutMenu" style={{
transform: "translate3d(" + x + "vw, " + 15 + "vw, 0)"
}}>
<h2><a href="#">Home</a></h2>
<h2><a href="#">About</a></h2>
<h2><a href="#">Contact</a></h2>
<h2><a href="#">Search</a></h2>
</div>
);
}
}
</Motion>
Обратите внимание на onMouseDown={this.handleMouseDown}
, Это то же самое событие, прикрепленное к синему кругу, которое отображает (и скрывает) меню при нажатии, и это прекрасно работает.
Что я здесь не так делаю? Кажется, что я делаю что-то явно не так, но я не могу понять, что это такое. Если это помогает, когда я проверяю компонент в React DevTools, обработчик событий даже не подключается. Это кажется действительно странным по какой-то причине. Может ли это быть проблемой?
Спасибо,
Kirupa
1 ответ
Это была ограниченная проблема! Сделав что-то вроде следующего, исправили это:
var self = this;
self.handleMouseDown;