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

提问者：小点点

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

React能够按照http://facebook.github.io/React/docs/jsx-gotchas.html中的描述呈现自定义属性：

如果您想使用一个自定义属性，您应该在它前面加上data-。

这是个好消息，但我找不到从事件对象访问它的方法，例如：

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.stylefine访问。而不是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"]

这些都没用。

共2个答案

匿名用户

以一种可能与您所要求的不同的方式帮助您获得所需的结果：

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

匿名用户

event.target提供了本机DOM节点，然后需要使用常规DOMAPI来访问属性。下面是关于如何做到这一点的文档：使用数据属性。

您可以执行event.target.dataset.tag或event.target.getAttribute('data-tag')；两个都管用。