如何从事件对象访问自定义属性在反应?

React能够呈现自定义属性 http://facebook.github.io/react/docs/jsx-gotchas.html:

如果要使用自定义属性，则应该在其前面加上数据- - - - - -。 <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????}); 
},

元素和数据属性在html中呈现良好。像style这样的标准属性可以通过event.target.style fine访问。而不是事件。我试了试:

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

这些都没用。

当前回答

这是我发现的最好的方法:

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

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

2015-07-29 16:46:36

其他回答

您可以像这样访问数据属性

event.target.dataset.tag

2019-04-30 11:14:37

你可以简单地使用event.target.dataset对象。这将为您提供具有所有数据属性的对象。

2020-03-18 05:23:46

<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

所以e.currentTarget.attributes['标签']。价值对我有用

2018-01-28 08:03:02

如果有人想用事件。target在React中找到一个空值，这是因为一个SyntheticEvent替换了event.target。SyntheticEvent现在持有'currentTarget'，例如在event.currentTarget.getAttribute('data-username')中。

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

看起来React这样做是为了在更多的浏览器上工作。您可以通过nativeEvent属性访问旧的属性。

2017-09-21 17:33:11

或者你可以使用闭包:

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 
}

2014-02-09 20:14:01

如何从事件对象访问自定义属性在反应?

推荐文章

最新文章

标签