我正在尝试 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
很高兴对我做错的事情提出任何建议!
最佳答案
所以,我无法确定为什么这是原因,但我认为问题在于您如何将构建拆分为两个单独的文件。
如果我更改您的 GulpFile 以排除 vendors.js
的构建并删除该行
appBundler.external(options.development ? dependencies : []);
它将构建一个包含所有依赖项的 js 文件,并且一切都按预期工作。
我的理论:
当您从 main.js
包中删除依赖项时,主包最终会只包含它所需要的内容,其中仅包含点击事件插件所需的 React 小片段。 react/lib/SyntheticUIEvent
等。因此,这些小片段会被修补以包含 touchTap 事件。
但是,在 vendor bundle 中,您拥有完整的 React,这正是您的应用程序所需要的。这没有修补以包含 touchTap 事件,因此实际上没有触发 touchTap 事件,因为您包含的 React 没有正确修补。
关于javascript - React、点击事件和 Material-ui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29881439/