Реагируйте, нажмите события и материал-ui

Я пытаюсь выполнить material-ui и react, и у меня возникает проблема с событиями, которые не срабатывают. Я установил react-tap-event-plugin, и я вызываю injectTapEventPlugin() при загрузке приложения.

toggleMenu никогда не вызывается в следующем фрагменте:

/** @jsx React.DOM */
var React = require('react');
var mui  = require('material-ui');
var LeftNav = mui.LeftNav;
var MenuItem = mui.MenuItem;
var AppBar = mui.AppBar;
var App = React.createClass({

  getInitialState: function () {
    return {
      message: 'Hello World!'
    };
  },
  toggleMenu: function () {
    console.log('clicked hamburger'); //<-- This is never fired
    this.refs.menu.toggle();
  },

    render: function() {
        var menuItems = [{ route: 'get-started', text: 'Get Started' }];
        return (
<div>
    <AppBar onMenuIconButtonTouchTap = {this.toggleMenu}  title = "Hej" />
    <LeftNav ref = "menu" docked = {false}  menuItems = {menuItems} />
</div>
        );
    }

});

module.exports = App;

Пример полного кода можно проверить здесь: https://github.com/oskbor/lunch-mirror

Счастлив за любые предложения о том, что я делаю неправильно!

Ответ 1

Итак, я не смог определить, почему это причина, но я думаю, что проблема заключается в том, как вы разбиваете свою сборку на 2 отдельных файла.

Если я изменю свой GulpFile, чтобы исключить здание vendors.js и удалить строку

appBundler.external(options.development ? dependencies : []);

он построит один файл js со всеми зависимостями в нем, и все будет работать так, как ожидалось.

Моя теория о том, почему:

Когда вы удаляете зависимости из пакета main.js, основной комплект заканчивается, включая только то, что ему нужно, и включает в себя только небольшие фрагменты React, которые требуется плагину tap-event. react/lib/SyntheticUIEvent и т.д. Итак, эти мелкие куски попадают, чтобы включить события touchTap.

Но, в комплекте поставщиков, у вас есть полный React, который вам нужен в вашем приложении. Это не исправлено, чтобы включать события touchTap, поэтому никакого события touchTap никогда не запускалось, потому что Реакт, который вы включили, неправильно обрабатывался.