React map遍历点击获取key - 好文

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

热门工具换一换