React、点击事件和material-ui答案

【问题标题】：React, tap events and material-uiReact、点击事件和material-ui
【发布时间】：2015-07-05 01:29:07
【问题描述】：

我正在尝试material-ui 和react，但我遇到了事件未触发的问题。我已经安装了react-tap-event-plugin，并在引导应用程序时调用了injectTapEventPlugin()。

toggleMenu 永远不会在以下 sn-p 中调用：

/** @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

很高兴对我做错了什么提出任何建议！

【问题讨论】：

标签： javascript reactjs touch-event material-ui

【解决方案1】：

所以，我无法确定这是什么原因，但我认为问题在于您如何将构建拆分为 2 个单独的文件。

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

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

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

我的理论：

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

但是，在供应商捆绑包中，您拥有完整的 React，这是您在应用程序中所需要的。这没有修补以包含 touchTap 事件，因此实际上没有触发 touchTap 事件，因为您包含的 React 没有正确修补。

【讨论】：