如何在 ReactJs 中获取标签属性值？答案

【问题标题】：How to get tags attribute value in ReactJs?如何在 ReactJs 中获取标签属性值？
【发布时间】：2016-07-11 16:52:50
【问题描述】：

我用 reactjs 创建了一个小应用程序。在按钮标签上，我设置了一个属性并传递了值。当我单击按钮时需要获取该属性值。如何用 react js 实现这一点？

示例代码，

var React  = require('react');
var CommentWall = React.createClass({
  getInitialState:function(){
    return {
      data:[]
    }
  },
  commentOpen:function(event){
    var targetID = this.state.dataId;
    console.log(targetID);
    $.ajax({
     url:url+"comments/"+targetID,
     type:"GET",
     dataType:"JSON",
     success:function(data){
       this.setState({data:data});
     });
  }
  render:function(){
    var wallCard;
    var commentWall = this.props.data.map(function(el, i){
      wallCard = <div className="card-content">
          <div className="content-inner">{el.LINES}</div>
          <button dataId={el.ID}>Click</button>
        </div>;
      return <div className="card wall-card" key={i}>{wallCard}</div>;
    }.bind(this));
    return (
      <div>{commentWall}</div>
    );
  }
});

module.exports = CommentWall;

【问题讨论】：

标签： javascript jquery html reactjs

【解决方案1】：

状态 - 不是被点击元素的状态，它是您的 CommentWall 组件的状态，它们只有 data 键。属性不是必须使用的。它不是 React 方式。

您可以关闭或简单绑定以将 ID 传递到您的函数中。

绑定示例：

var React  = require('react');
var CommentWall = React.createClass({
  getInitialState: function(){
    return {
      data:[]
    }
  },

  commentOpen: function(targetID, event){
    console.log(targetID);
    $.ajax({
     url:url+"comments/"+targetID,
     type:"GET",
     dataType:"JSON",
     success:function(data){
       this.setState({data:data});
     });
  },

  render:function(){
    var wallCard;
    var commentWall = this.props.data.map(function(el, i){
      wallCard = <div className="card-content" onClick={this.commentOpen.bind(this, el.ID)>
          <div className="content-inner">{el.LINES}</div>
          <button>Click</button>
        </div>;
      return <div className="card wall-card" key={i}>{wallCard}</div>;
    }.bind(this));
    return (
      <div>{commentWall}</div>
    );
  }
});

module.exports = CommentWall;

【讨论】：