反应，点击事件和材料-用户界面

Question

我正在尝试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

欢迎对我做错了什么的任何建议！

Answer 1

因此，我无法确定为什么这是原因，但我认为问题是如何将您的构建分成两个单独的文件。

如果我更改您的GulpFile以排除vendors.js的构建并删除行

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

它将构建一个包含所有依赖项的单个js文件，并且一切都按预期工作。

我的理论是：

当您从main.js包中移除依赖项时，主包最终只包含它所需的内容，其中只包括点击事件插件所需的小部分反应。react/lib/SyntheticUIEvent等等，因此，这些小片段被修补以包括touchTap事件。

但是，在供应商包中，您有充分的反应，这就是您在应用程序中所需要的。这不是修补程序来包含touchTap事件，因此没有一个touchTap事件真正被触发，因为您所包含的反应没有得到正确的修补。