javascript - react如何获取点击dom的数据？

Question

做了一个组件用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 (
    <p 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">
                <p className="slil-card" >
                  <p className="skill-img" onClick={this.handleOpen}>
                    <img src={res.URL} />
                  </p>
                  <p className="skill-content">
                    <h2 className="skill-title"><span onClick={this.handleOpen}>{res.TITLE}</span></h2>
                    <p className="skill-subtext">{res.SUBTEXT}</p>
                  </p>
                </p>             
                 </Col>
          },this)
        } 
      </Row>
    </p>
    );
  }

Answer 1

onClick={this.handleOpen.bind(this,res)}

handleOpen(res) {
 //改成你想要的
 console.log(res);
}

Answer 2

可以通过target来获取点击到的元素

handleOpen(event){
      console.log(event.target.className)//输出节点的className
      console.log(event.target.innerHTML)//输出节点的html

      console.log(event.target)// 这个可以看到target中的所有方法
  },

Answer 3

把点击事件放最外层，点击时候获取当前元素 index，然后根据 index 到数组里取对应的数据