react项目工程避免不了在render方法中进行一些js事件,我在做项目的时候也遇到了一些小小的问题;
render方法中map循环数据,返回jsx语法时 onClick事件失效,这是一个this指向问题,做一下this转义即可;
看code:
import React from 'react';
export default class Life extends React.Component{
constructor(props){
super(props);
this.state = {
data: [
{name:'张三',age:18,id:1},
{name:'李四',age:19,id:2},
{name:'王五',age:20,id:3}
]
};
}
handleClick =(e)=>{
console.log(e)
};
render() {
let {data} = this.state;
let self = this;
return <div>
{
data.map(function (item, index) {
return <div key={index}>
<p>{item.name}</p>
<h2 onClick={self.handleClick.bind(self, item)}>{item.age}</h2>
</div>
})
}
</div>
}
}