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

这些都没有工作。

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

Answer 2

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') ; 任何一个工作。

Answer 3

或者你可以使用闭包：

 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 } 

Answer 4

这是我find的最好的方法：

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

这些属性存储在“NamedNodeMap”中，您可以使用getNamedItem方法轻松访问这些属性。

Answer 5

我不知道React，但在一般情况下，你可以传递像这样的自定义属性：

1）在html标签内定义一个带有数据前缀的新属性

 data-mydatafield = "asdasdasdaad" 

2）从JavaScript获取

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

Answer 6

 // 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> 

Answer 7

这也起作用：

var attribute = $（event.target.attributes ['data-tag']）。val（）;

Answer 8

在React中你不需要html数据，使用函数返回其他函数; 像这样，发送自定义参数非常简单，您可以访问自定义数据和事件。

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

Answer 9

如果有人试图在React中使用event.target并find空值，那是因为SyntheticEvent已经replace了event.target。 SyntheticEvent现在包含“currentTarget”，如event.currentTarget.getAttribute（'data-username'）。

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

它看起来像React这样做，以便它可以在更多的浏览器。 您可以通过nativeEvent属性访问旧属性。