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