Reactではmapから出てきた要素にイベントを追加できません

reactの使用では、reactのmap関数がよく使われ、jqueryのmapと同じ使い方をしますが、mapごとに出てくる要素に追加すると、追加したイベントが関連付けられていないことに気づきます.
例えば、私たちの多くのコメントは、私は各コメントの下に返事のinputを追加する必要があります.input期間は最初は隠していました.私が毎日コメントの下の返事をクリックすると、input入力ボックスが表示されます.
 
ここで例を挙げます.例えば、私の配列には3つの文字があります.私はそれらを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);