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

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

这些都没用。

当前回答

我不了解React，但在一般情况下，你可以像这样传递自定义属性:

1)在html-tag中定义一个data- prefix的新属性

data-mydatafield = "asdasdasdaad"

2) get from javascript with

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

2017-02-16 10:29:48

其他回答

从React v16.1.1(2017)开始，官方解决方案如下:https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

应该:

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

2017-11-26 19:47: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

事件。target为您提供本机DOM节点，然后您需要使用常规DOM api来访问属性。下面是关于如何做到这一点的文档:使用数据属性。

你可以使用event.target.dataset.tag或event.target.getAttribute('data-tag');两种方法都可以。

2013-12-04 18:41:11

用不同于你要求的方式帮助你达到预期的结果:

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

2013-12-07 21:21:37

我不了解React，但在一般情况下，你可以像这样传递自定义属性:

1)在html-tag中定义一个data- prefix的新属性

data-mydatafield = "asdasdasdaad"

2) get from javascript with

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

2017-02-16 10:29:48

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

推荐文章

最新文章

标签