Reactのイベントオブジェクトからカスタム属性にアクセスする方法は？

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

カスタム属性を使用する場合は、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"]

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

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

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

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

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

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

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

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

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

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

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

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

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 
}

// Method inside the component
userClick(event){
 let tag = event.currentTarget.dataset.tag;
 console.log(tag); // should return Tagvalue
}
// when render element
<a data-tag="TagValue" onClick={this.userClick}>Click me</a>

React v16.1.1（2017）以降の公式ソリューションは次のとおりです。https：//reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR： OPは次のことを行う必要があります。

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

<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

そうe.currentTarget.attributes['tag'].value私の作品

次のようなデータ属性にアクセスできます

event.target.dataset.tag

次の1行のコードで問題が解決しました。

event.currentTarget.getAttribute('data-tag')

Reactについては知りませんが、一般的には次のようなカスタム属性を渡すことができます。

1）htmlタグ内にdata-接頭辞を持つ新しい属性を定義します

data-mydatafield = "asdasdasdaad"

2）JavaScriptから取得

e.target.attributes.getNamedItem("data-mydatafield").value 

Reactでevent.targetを使用してnull値を見つけようとしているのは、SyntheticEventがevent.targetを置き換えたためです。SyntheticEventがevent.currentTarget.getAttribute（ 'data-username'）などの「currentTarget」を保持するようになりました。

https://facebook.github.io/react/docs/events.html

より多くのブラウザーで機能するように、Reactがこれを行うようです。nativeEvent属性を介して古いプロパティにアクセスできます。

DOMプロパティ（遅い）を割り当てる代わりに、実際にハンドラーを作成する関数にパラメーターとして値を渡すだけです。

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag = (customAttribute) => (event) => {
    this.setState({inputVal: customAttribute});
}

単にevent.target.datasetオブジェクトを使用できます。これにより、オブジェクトにすべてのデータ属性が与えられます。

Reactでは、htmlデータは必要ありません。他の関数を返す関数を使用してください。このように、それは非常にシンプルなカスタムパラメータの送信であり、カスタムデータとイベントにアクセスできます。

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