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> ) } }