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