Обработчик событий внутри тега движения React-Motion игнорируется

Question

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

Answer 1

Это была ограниченная проблема! Сделав что-то вроде следующего, исправили это:

var self = this;

self.handleMouseDown;