React中,map出来的元素添加事件无法使用
2015-12-08 16:59
555 查看
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联,
比如,我们很多的评论,我需要在每个评论下面加一个回复的input,input期初是隐藏的,当我点击每天评论下面的回复时,input输入框显示
这里举个例子,比如我数组里有三组文字,我把它们渲染到li中,点击每个li,alert()出每个li里面的内容,按照下面的方法,你会发觉出错,无法显示
正确的方法是,不要在map的时候进行return。而是先将map的结果保存到一个变量,比如我们可以把它们保存在一个数组里,然后我return这个数组。这样就可以达到我们的效果了,代码如下:
比如,我们很多的评论,我需要在每个评论下面加一个回复的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);
相关文章推荐
- ReactJS修炼之路(一)
- react native 热潮
- react-native源码分析系列一
- React Native
- React-Native入门指导之iOS篇 —— 一、准备工作
- React Native学习-第一篇
- 一看就懂的ReactJs入门教程(精华版)
- 从jQuery到AngularJS,再到React,前端必须走在最前端
- Twisted源码分析系列01-reactor
- react native 中es6语法解析
- React js 入门总结
- React的Transaction浅析
- 玩转 React 服务器端渲染
- 优秀开发地址 (包含前段,android 性能优化 以及react native)
- 初始react
- react redux
- React-Native
- multiple reactors + thread pool(one loop per thread + threadpool)(突发I/O与密集计算)
- 从epoll构建muduo-13 Reactor + ThreadPool 成型
- pycharm集成gulp自动编译reactjs