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

Question

Я пытаюсь воссоздать скользящее меню с помощью React Motion. Вы можете увидеть мой нерабочий пример здесь: http://codepen.io/kirupa/pen/BQVzvQ (нажмите на синий круг, чтобы отобразить меню или скрыть его)

Вот моя проблема. Меню должно исчезнуть, когда вы щелкнете в любом месте желтой области. Рабочий пример не-ReactMotion приведен здесь: https://www.kirupa.com/html5/examples/slidingmenu.htm

Возвращение к реактору. По какой-то причине мой обработчик событий, прикрепленный к элементу меню внутри тега 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;