248

http://facebook.github.io/react/docs/jsx-gotchas.htmlで説明されているように、React はカスタム属性をレンダリングできます 。

カスタム属性を使用する場合は、接頭辞 data- を付ける必要があります。

<div data-custom-attribute="foo" />

イベントオブジェクトからアクセスする方法が見つからないことを除けば、それは素晴らしいニュースです。

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
    this.setState({inputVal: event.target????}); 
},

要素とdata-プロパティは html で適切にレンダリングされます。のような標準プロパティにstyleは、問題なくアクセスできますevent.target.style。event.target私が試した代わりに：

 event.target.props.data.tag
 event.target.props.data["tag"]
 event.target.props["data-tag"]  
 event.target.data.tag
 event.target.data["tag"]
 event.target["data-tag"]

これらのどれも機能しませんでした。

4

15 に答える 15

361

event.targetネイティブ DOM ノードが提供されるので、通常の DOM API を使用して属性にアクセスする必要があります。これを行う方法に関するドキュメントは次のとおりです: Using data attributes。

event.target.dataset.tagまたはのいずれかを実行できますevent.target.getAttribute('data-tag')。どちらかが動作します。

于 2013-12-04T18:41:11.993 に答える
180

おそらくあなたが尋ねたのとは異なる方法で、望ましい結果を得るのを助けるために：

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

に注意してbind()ください。これはすべてjavascriptなので、そのような便利なことができます。DOM ノードを追跡するためにデータを DOM ノードにアタッチする必要がなくなりました。

IMO これは、DOM イベントに依存するよりもはるかにクリーンです。

2017 年 4 月の更新:最近ではonClick={() => this.removeTag(i)}、.bind

于 2013-12-07T21:21:37.600 に答える
56

これが私が見つけた最良の方法です：

var attribute = event.target.attributes.getNamedItem('data-tag').value;

これらの属性は「NamedNodeMap」に格納され、getNamedItem メソッドで簡単にアクセスできます。

于 2015-07-29T16:46:36.797 に答える
25

または、クロージャーを使用できます。

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag(i)}></a>
...
},
removeTag: function (i) {
    return function (e) {
    // and you get both `i` and the event `e`
    }.bind(this) //important to bind function 
}
于 2014-02-09T20:14:01.810 に答える
7

この1行のコードで問題が解決しました：

event.currentTarget.getAttribute('data-tag')
于 2019-08-05T03:21:45.817 に答える
0

コンストラクター内の React.Component クラスで定義されているthis.setStateメソッドを使用する必要があるすべてのメソッドをバインドすることをお勧めします。この場合、コンストラクターは次のようになります。

    constructor() {
        super()
        //This binding removeTag is necessary to make `this` work in the callback
        this.removeTag = this.removeTag.bind(this)
    }
    removeTag(event){
        console.log(event.target)
        //use Object destructuring to fetch all element values''
        const {style, dataset} = event.target
        console.log(style)
        console.log(dataset.tag)
    }
   render() {
   ...
      <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
   ...},

オブジェクトの構造化に関する詳細については、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuringを参照してください。

于 2020-07-09T10:30:10.543 に答える