Reagire, toccare eventi e materiale-ui

Question

Sto provando material-ui e react e sto riscontrando un problema con gli eventi che non si attivano. Ho installato react-tap-event-plugin e chiamo injectTapEventPlugin() durante l'avvio dell'applicazione.

toggleMenu non viene mai chiamato nel seguente frammento:

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

L'esempio di codice completo può essere controllato da qui: https://github.com/oskbor/lunch-mirror

felici a qualche suggerimento su quello che sto facendo male!

Answer 1

Quindi, non sono stato in grado di determinare perché questa è la causa, ma penso che il problema è come si divide la compilazione in 2 file separati.

Se cambio il vostro GulpFile per escludere la costruzione di vendors.js e rimuovere la riga

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

sarà costruire un singolo file js con tutte le dipendenze in esso e tutto funziona come previsto.

La mia teoria sul perché:

quando si rimuove le dipendenze dalla main.js fascio, il fascio principale finisce tra cui proprio quello di cui ha bisogno, che comprende solo i piccoli pezzi di Reagire che il tap-evento plug esigenze. react/lib/SyntheticUIEvent, ecc. Quindi, questi piccoli pezzi vengono corretti per includere gli eventi touchTap.

Ma, nel bundle dei fornitori, si dispone del React completo, che è ciò che si richiede nella propria app. Questo non è patchato per includere gli eventi touchTap, quindi nessun evento touchTap è mai stato effettivamente licenziato, perché il React che stavi includendo non veniva correttamente sottoposto a patch.