首页 > 其他 > 详细

React中,map出来的元素添加事件无法使用

时间:2015-12-08 17:53:49      阅读:379      评论:0      收藏:0      [点我收藏+]

在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联,

比如,我们很多的评论,我需要在每个评论下面加一个回复的input,input期初是隐藏的,当我点击每天评论下面的回复时,input输入框显示

 

这里举个例子,比如我数组里有三组文字,我把它们渲染到li中,点击每个li,alert()出每个li里面的内容,按照下面的方法,你会发觉出错,无法显示

var myTest = React.createClass({ 

	handleChange: function(item) { 
		console.log(item);
	}, 
    render: function () { 
	var showArry = [‘hello1‘, ‘hello2‘, ‘hello3‘]; 

	return ( 
		<ul>
			{ 
				showArry.map(function (item) { 

					return 	<li onClick={this.handleChange.bind(this.item)}>{item}</li>;
							
				}) 
			} 
		</ul>
	); 
	
});
React.render(<myTest/>, document.body);

  

正确的方法是,不要在map的时候进行return。而是先将map的结果保存到一个变量,比如我们可以把它们保存在一个数组里,然后我return这个数组。这样就可以达到我们的效果了,代码如下:

var myTest = React.createClass({ 

	handleChange: function(item) { 
		console.log(item);
	}, 
    render: function () { 
	var showArry = [‘hello1‘, ‘hello2‘, ‘hello3‘]; 
	var newArry=[];
	for(var i=0;i<showArry.length;i++){
		var item=showArry[i];
		return newArry.push(<li onClick={this.handleChange.bind(this.item)}>{item}</li>)
	}

	return ( 
		<ul>
			{newArry} 		
		</ul>
	); 
	
});
React.render(<myTest/>, document.body);

  

 

React中,map出来的元素添加事件无法使用

原文:http://www.cnblogs.com/xianyulaodi/p/5029623.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!