【原】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);

  

上一篇:cocos2d - 翻转两个Sprite


下一篇:ubuntu新建、删除用户