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

Question

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

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

这些都不起作用。

原文由 andriy_sof 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jared Forsyth 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

您可以执行 event.target.dataset.tag 或 event.target.getAttribute('data-tag') ；任何一个都有效。

原文由 Sophie Alpert 发布，翻译遵循 CC BY-SA 4.0 许可协议