javascript - react如何获取点击dom的数据?
本文介绍了javascript - react如何获取点击dom的数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
做了一个组件用react遍历出来然后想获取每次点击不同个时候的不同数据该怎么做呢?
const Skill = React.createClass({
getInitialState: function() {
return {
data: [{
"ID":"1",
"URL": "./public/images/skill.jpg",
"TITLE":"Helloweba1",
"SUBTEXT":"WEB前端应用教程+演示+源码hhhhhhhsd看没得嘛",
"HREF":"javascript:void(0)"
}, {
"ID":"2",
"URL": "./public/images/skill.jpg",
"TITLE":"Helloweba2",
"SUBTEXT":"WEB前端应用教程+演示+源码hhhhhhhsd看没得嘛",
"HREF":"javascript:void(0)"
}, {
"ID":"3",
"URL": "./public/images/skill.jpg",
"TITLE":"魅族pro5随时拍",
"SUBTEXT":"魅族PRO 5在上年的发布至今已经有了半年多的时间了,PRO 5它不是一款完美的手机,但却是我最满意的魅族手机之一,也是我心中当之无愧的2015国产旗舰手机,它伴随着我走过了半年的时光,这半年的点滴,就让我用随手拍来回忆,看看我与PRO 5走过的半年。",
"HREF":"javascript:void(0)"
}, {
"ID":"4",
"URL": "./public/images/skill.jpg",
"TITLE":"Helloweba3",
"SUBTEXT":"WEB前端应用教程+演示+源码hhhhhhhsd看没得嘛",
"HREF":"javascript:void(0)"
}, {
"ID":"5",
"URL": "./public/images/skill.jpg",
"TITLE":"魅族pro5随时拍",
"SUBTEXT":"魅族PRO 5在上年的发布至今已经有了半年多的时间了,PRO 5它不是一款完美的手机,但却是我最满意的魅族手机之一,也是我心中当之无愧的2015国产旗舰手机,它伴随着我走过了半年的时光,这半年的点滴,就让我用随手拍来回忆,看看我与PRO 5走过的半年。",
"HREF":"javascript:void(0)"
}]
}
},
handleOpen(){
window.open("details.html");
//这里该怎么获取所点击元素的URL、TITLE等数据?
},
render() {
return (
<div className="photo">
<h2 className="lastest-title-photo">最新作品
</h2>
<Row className="skill">
{
this.state.data.map(function(res){
return <Col span="24" key={res.ID} ref="myTextInput">
<div className="slil-card" >
<div className="skill-img" onClick={this.handleOpen}>
<img src={res.URL} />
</div>
<div className="skill-content">
<h2 className="skill-title"><span onClick={this.handleOpen}>{res.TITLE}</span></h2>
<p className="skill-subtext">{res.SUBTEXT}</p>
</div>
</div>
</Col>
},this)
}
</Row>
</div>
);
}
解决方案
onClick={this.handleOpen.bind(this,res)}
handleOpen(res) {
//改成你想要的
console.log(res);
}
这篇关于javascript - react如何获取点击dom的数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文