ReactJsのタグ属性値を取得する方法は？

Question

私はreactjsで1つの小さなアプリケーションを作成しました。ボタンのタグでは、属性を1つ設定して値を渡しました。ボタンをクリックするとその属性値が必要になります。どのように反応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

州 - それは唯一のdataキーを持っているあなたのCommentWallコンポーネントの状態ですが、クリックされた要素の状態ではありません。 属性は使用する必要はありません。それは反作法ではありません。

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;