javascript - error - Reacciona, toca eventos y material-ui.

multiline material ui

Question

Estoy probando material-ui y react y estoy teniendo un problema con los eventos que no se activan. He instalado el react-tap-event-plugin y llamo injectTapEventPlugin() mientras injectTapEventPlugin() la aplicación.

toggleMenu nunca se llama en el siguiente fragmento de 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;

El ejemplo de código completo se puede consultar aquí: https://github.com/oskbor/lunch-mirror

Feliz por cualquier sugerencia sobre lo que estoy haciendo mal!

Answer 1

Por lo tanto, no pude determinar por qué esta es la causa, pero creo que el problema es cómo está dividiendo su compilación en 2 archivos separados.

Si cambio su GulpFile para excluir la construcción de vendors.js y eliminar la línea

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

construirá un solo archivo js con todas las dependencias y todo funcionará como se espera.

Mi teoría sobre por qué:

Cuando eliminas las dependencias del paquete main.js , el paquete principal incluye lo que necesita, que incluye solo los pequeños fragmentos de React que necesita el complemento de evento de tap. react/lib/SyntheticUIEvent , etc. Entonces, esas pequeñas piezas se parchean para incluir los eventos touchTap.

Pero, en el paquete de proveedores, tiene el React completo, que es lo que necesita en su aplicación. Esto no está parcheado para incluir los eventos de TouchTap, por lo que nunca se disparó ningún evento de TouchTap, porque el Reactor que incluía no se estaba parchando correctamente.