web-dev-qa-db-ja.com

React、タップイベント、マテリアルUI

_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

私が間違っていることについての提案を喜んでください！

javascriptreactjstouch-eventmaterial-ui
28
oskbor

そのため、これが原因である理由を特定できませんでしたが、問題は、ビルドを2つの別々のファイルに分割する方法にあると思います。

GulpFileを変更してvendors.jsの構築を除外し、行を削除した場合

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

すべての依存関係を含む単一のjsファイルを作成し、すべてが期待どおりに機能します。

理由に関する私の理論：

main.jsバンドルから依存関係を削除すると、メインバンドルには必要なものだけが含まれ、タップイベントプラグインに必要なReact）の小さな部分だけが含まれます。 react/lib/SyntheticUIEventなど。したがって、これらの小さな部分には、touchTapイベントを含めるようにパッチが適用されます。

ただし、ベンダーバンドルには、アプリに必要な完全なReactが含まれています。これにはtouchTapイベントが含まれるようにパッチが適用されていないため、含まれているReactに適切にパッチが適用されていなかったため、touchTapイベントが実際に発生することはありませんでした。

17
Crob