javascript - React, tap events and material-ui - Stack Overflow

admin管理员组

文章数量:1221320

Im trying out material-ui and react and I'm running into an issue with events not firing. I have installed the react-tap-event-plugin and I call injectTapEventPlugin() while bootstrapping the application.

toggleMenu is never called in the following snippet:

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

The full code example can be checked out from here:

Happy for any suggestions on what Im doing wrong!

Im trying out material-ui and react and I'm running into an issue with events not firing. I have installed the react-tap-event-plugin and I call injectTapEventPlugin() while bootstrapping the application.

toggleMenu is never called in the following snippet:

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

The full code example can be checked out from here: https://github.com/oskbor/lunch-mirror

Happy for any suggestions on what Im doing wrong!

• javascript
• reactjs
• touch-event
• material-ui

Share Improve this question Follow edited Jul 17, 2015 at 17:51 Dheeraj Vepakomma 28.7k1818 gold badges8585 silver badges107107 bronze badges asked Apr 26, 2015 at 18:08 oskboroskbor 1,5921818 silver badges3535 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 17 +50

So, I was not able to determine why this is the cause, but I think the problem is how you are splitting your build into 2 separate files.

If I change up your GulpFile to exclude the building of vendors.js and remove the line

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

it will build a single js file with all the dependencies in it and everything works as expected.

My theory on why:

When you remove the dependencies from the main.js bundle, the main bundle ends up including just what it needs, which includes just the small pieces of React that the tap-event plugin needs. react/lib/SyntheticUIEvent, etc. So, those small pieces get patched to include the touchTap events.

But, in the vendors bundle, you have the full React, which is what you require in your app. This is not patched to include the touchTap events, so no touchTap event was ever actually getting fired, because the React that you were including was not properly getting patched.

本文标签： javascriptReacttap events and materialuiStack Overflow