React map遍历点击获取key值

在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作

首先准备一个需要遍历循环的集合，可以是键值对，也可以是数组，

 const fromIndex=[1, 2, 3, 4, 5];

JSX允许在大括号中嵌入任何表达式，因此可以内联 map() 结果

所以新建一个对象，作为map结果的载体以便插入jsx

const fromList=fromIndex.map((number)=><div key={number.toString()}className={index.fromItem+" "+universal.rowCenter}onClick={(e)=>{this.changeFrom(e,number.toString())}}>{number}</div>);

插入jsx

     return(<div className={universal.columnCenter+" "+index.leftNavigation}><div className={index.fromList+" "+universal.columnCenter} >{fromList}</div></div>)

键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
所以一定要记得加上key

然后在遍历的时候加上点击事件，同时将key值传入就行了
ES6写法

  changeFrom(e,a){console.log(e.target,a);}
onClick={(e)=>{this.changeFrom(e,number.toString())

效果

完整的组件代码

class LeftNavigation extends React.Component{constructor(props){super(props);// 这个绑定是必要的，使`this`在回调中起作用this.changeFrom = this.changeFrom.bind(this);}changeFrom(e,a){console.log(e.target,a);}render(){const fromIndex=[1, 2, 3, 4, 5];const fromList=fromIndex.map((number)=><div key={number.toString()}className={index.fromItem+" "+universal.rowCenter}onClick={(e)=>{this.changeFrom(e,number.toString())}}>{number}</div>);return(<div className={universal.columnCenter+" "+index.leftNavigation}><div className={index.fromList+" "+universal.columnCenter} >{fromList}</div></div>)}
}

React map遍历点击获取key相关推荐

react map遍历
记录一下项目制作过程中学到的一些方法,以便温习 render(){return (<ul className={style.decoratewrapper}>{this.state.dec ...
JS遍历对象，获取key、value的几种方法
1. 使用for-in let person = { name: '张三',age: '21', }for(let key in person){if(Object.prototype.hasOwnP ...
Map 四种获取 key 和 value 值的方法，以及对 map 中的元素排序
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 获取map的值主要有四种方法,分为两类: 调用 map.keySet() 方法来获取 key ...
Map四种获取key和value值的方法，以及对map中的元素排序
2019独角兽企业重金招聘Python工程师标准>>> 获取map的值主要有四种方法,这四种方法又分为两类: 一类是调用map.keySet()方法来获取key和value的值, 另 ...
java map遍历_Java中Map集合的两种遍历方式
Java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下Java中Map集合的两种遍历方式! 关于遍历Map集合的几 ...
Java遍历Map集合，获取key、value等方式
首先构建一个Map集合: Map<String, Integer> buy=new HashMap<>();buy.put("苹果手机", 2);//添加键 ...
java遍历map获取key value
public static void main(String[] args) {// 循环遍历Map的2中方法Map<String, Object> map = new HashMap&l ...
c++ map 获取key列表_好未来Golang源码系列一：Map实现原理分析
分享老师:学而思网校郭雨田一.map的结构与设计原理 golang中map是一个kv对集合.底层使用hash table,用链表来解决冲突 ,出现冲突时,不是每一个key都申请一个结构通过链表串起 ...
freemaker .flt文件自动换行的问题，map循环获取key和value
1.如果直接代码中声明换行的字符串,在freemaker中是不能直接换行的,需要在赋值的时候加上替换语句,如下 ${(list2.resultBody?replace('\r\n','<w:br ...

React map遍历点击获取key

React map遍历点击获取key值

React map遍历点击获取key相关推荐

最新文章

热门文章