[解決済み] 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- プロパティが正常にレンダリングされます。のような標準的なプロパティは 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ノードを追跡するためにデータを添付する必要はありません。

DOMイベントに依存するよりも、ずっとすっきりしていると思います。

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