web-dev-qa-db-ja.com

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????}); 
},

Elementとdata-プロパティはhtmlでうまくレンダリングされます。 styleのような標準プロパティはevent.target.style fineとしてアクセスできます。 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"]

どれもうまくいきませんでした。

javascriptfacebookreactjs
165
andriy_sof

あなたがたぶんあなたが尋ねたより異なる方法であなたが望ましい結果を得るのを助けるために：

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月：最近では.bindの代わりにonClick={() => this.removeTag(i)}を書く

151
Jared Forsyth

event.targetはあなたにネイティブDOMノードを与えます、そしてあなたは属性にアクセスするために通常のDOM APIを使う必要があります。これを行う方法についての文書は次のとおりです。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes#JavaScript_Access

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

221
Sophie Alpert

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

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

これらの属性は "NamedNodeMap"に格納されています。これは、getNamedItemメソッドを使用して簡単にアクセスできます。

44
roctimo

あるいはクロージャを使うこともできます。

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 
}
23
Tudor Campean
// 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>
14
Mentori
<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は私のために働く

7
Manindra Gautam

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}); 
}
7
tytk

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

1）html-tagの中にdata-prefixで新しい属性を定義する

data-mydatafield = "asdasdasdaad"

2）でJavaScriptから取得

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

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

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

Reactがこれを実行して他のブラウザでも機能するように見えます。 nativeEvent属性を介して古いプロパティにアクセスできます。

2
Eduardo

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

event.target.dataset.tag
1
Rameez Iqbal

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

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

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

event.currentTarget.getAttribute('data-tag')
0
Emeka Augustine