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

javascript facebook reactjs

2022-08-30 00:32:39

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????}); 
},

元素和属性以 html 形式呈现良好。标准属性（如）可以很好地访问。而不是我尝试：data-styleevent.target.styleevent.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"]

这些都不起作用。

答案 1

event.target为您提供本机 DOM 节点，然后您需要使用常规 DOM API 来访问属性。以下是有关如何执行此操作的文档：使用数据属性。

你可以做任何一个或;任何一个都有效。event.target.dataset.tagevent.target.getAttribute('data-tag')

答案 2

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

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

请注意.因为这都是javascript，你可以做这样方便的事情。我们不再需要将数据附加到 DOM 节点来跟踪它们。bind()

IMO 这比依赖 DOM 事件要干净得多。

2017 年 4 月更新：这些天我会写而不是onClick={() => this.removeTag(i)}.bind