我正在尝试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
很高兴收到关于我做错了什么的任何建议!
所以,我无法确定为什么这是原因,但我认为问题是你如何将你的构建拆分为 2 个单独的文件。
如果我更改您的 GulpFile 以排除vendors.js
的构建并删除该行
appBundler.external(options.development ? dependencies : []);
它将构建一个包含所有依赖项的单个 js 文件,并且一切都按预期工作。
我的理论为什么:
当你从main.js
捆绑包中删除依赖项时,主捆绑包最终只包含它需要的内容,其中只包括tap-event插件需要的小块React。 react/lib/SyntheticUIEvent
等。 因此,这些小块被修补以包含touchTap事件。
但是,在供应商捆绑包中,您拥有完整的 React,这是您在应用程序中所需要的。 这没有修补以包含 touchTap 事件,因此实际上没有 touchTap 事件被触发,因为您包含的 React 没有正确修补。