ReactJS Server Side rendering click event won't fire -
i have code compiled server side node-jsx click events not fire. being novice can't figure out missed
/** @jsx react.dom */ var react = require('react/addons') var mui = require('material-ui'); var thememanager = new mui.styles.thememanager(); var injecttapeventplugin = require("react-tap-event-plugin"); var unydentapp = react.createclass({ childcontexttypes: { muitheme: react.proptypes.object }, getchildcontext: function() { return { muitheme: thememanager.getcurrenttheme() }; }, componentdidmount: function () { }, render: function () { var menuitems = [ { route: 'home', text: 'home' }, { route: 'about', text: 'about' }, ]; return ( <div id="uny-dent"> <mui.leftnav ref='leftnav' menuitems={menuitems} docked={false} /> <mui.appbar title="unydent" onmenuiconbuttontouchtap={ this._handleclick }/> </div> ) }, _handleclick: function() { alert('ok'); }, togglenav: function(e){ e.preventdefault(); alert(); this.refs.leftnav.toggle(); } }); /* module.exports instead of normal dom mounting */ module.exports = unydentapp;
it looks you're attempting commonly referred "isomorphic react". differs rendering react template server-side (resulting in rendered static page) in supports "mounting" react component(s) client-side (resulting in rendered dynamic page).
right you're doing former, , therefore react isn't running client-side, click-event isn't "wired up". there several different solutions isomorphic react. here's 1 in particular paypal team: https://github.com/paypal/react-engine
Comments
Post a Comment