2015-07-21 107 views
0

我有这个代码是与node-jsx编译服务器端,但点击事件不会触发。作为新手,我想不出什么我错过了ReactJS服务器端渲染点击事件不会触发

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

可能将处理程序绑定到事件。 – Amit

+0

对不起,我错过了事件处理程序,但在我的代码片段中,但现状是相同的 – fefe

回答

1

它看起来就像你正在试图做的是通常被称为“同形响应”。这与简单地呈现反应模板服务器端(导致呈现为静态页)的不同之处在于,它还支持“装载”反应组件客户端(导致呈现的动态页面)。

现在你只是在做前者,因此React实际上并没有运行客户端,所以点击事件实际上并没有“连线”。同构反应有几种不同的解决方案。以下是Paypal团队中的一个特别之处:https://github.com/paypal/react-engine

+0

感谢您的反馈我会检查它的细节 – fefe

相关问题