Question

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

示例代码，

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

状态 - 不是被点击的元素的状态，它是CommentWall组件的状态，它只有data个键。不需要使用属性。它不是React-way。

你可以关闭或简单绑定将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;

如何在ReactJs中获取tags属性值？

1 个答案: