在使用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);
时间: 2024-10-08 13:41:28