如何从React中的事件对象访问自定义属性？

Question

如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"]

这些都不起作用。

Answer 1

为了帮助您以与要求不同的方式获得期望的结果：

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