猿问

Nodejs + React做后端渲染时，如何绑定事件

以下是React实现的后端组件（click-demo.js），我希望在后端渲染的时候直接绑定onClick事件，避免在前端再次操作，代码如下
varReact	=require("react/addons");
varClickItem	=React.createClass({
	onClick	:function(){
		console.log("Itemclicked~");		
	},
	render:function(){
		return(
			点击这里输出console信息！
		);		
	}
});
module.exports=ClickItem;
在路由器中，我通过React.createFactory以及renderToString将组件转化为字符串并渲染到页面中去，如下：
varReact			=require("react/addons");
varClickDemo		=React.createFactory(require("../components/click-demo"));
exports.index	=function(req,res){
	vardemo	=React.renderToString(ClickDemo());
	res.render("index/index",{demo:demo});
};
页面上直接通过如下方式在输出内容：
<%-demo%>
但是，问题是，在组件中绑定的onClick事件并没有生效：
点击这里输出console信息！
是绑定的方式不对，还是本来就不支持这种事件绑定方式，望各位大神指点～

		

			
临摹微笑

			
浏览 938回答 2

		

	
	

									
	

	

		
2回答

		

			
			

				
				
开满天机

				
后端只会生成HTMLString,所有浏览相关的操作是无法进行的。E.g.componentDidMount事件不会被触发。在后端生成HTMLString并Return回浏览器端时，要重新render一次，但注意这次render要保证有同样的State(如果你用Flux的话，就是Store里的data要一样)。在这次浏览器端的render中，会发生事件绑定。一般情况下，只需要对‘GET’进行服务器端渲染，'POST','PUT','DELETE'这些不太有必要，完全在客户端处理就行了

				

					

            
            
          

          
0

				

			

			
		

	

	

		随时随地看视频慕课网APP
	

	
	
	

		
相关分类

		

			
			

			
				 JavaScript
			
			

				
			
		

	

	
	
	

		我要回答