首页 文章

反应，点击事件和材料 - ui

提问于
浏览 次
27

我试着 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

对于我做错了什么建议感到高兴！

javascript reactjs touch-event material-ui

1 回答

  • 16

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

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

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

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

    我的理论为什么：

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

    但是，在供应商捆绑包中，您拥有完整的React，这是您在应用程序中所需的 . 这不包括touchTap事件，因此没有触发任何touchTap事件，因为您所包含的React未正确修补 .

    回复于

相关问题