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

小编典典

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

all

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

这些都不起作用。

阅读 82

2022-05-23

共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

2022-05-23