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

在使用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);