javascript - 如何在 ReactJs 中获取标签属性值？

Question

我用 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;

Answer 1

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

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

绑定(bind)示例:

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;