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

IT技术 javascript facebook reactjs
2021-01-23 13:48:34

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

这些都没有奏效。

6个回答

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

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

我使用typescript。就我而言，我不得不使用event.currentTarget.getAttibute('data-tag')
2021-03-15 13:48:34
这个答案在性能方面比公认的要好。这样做意味着我们不会在每次渲染时都创建一个新函数。它不仅在每次渲染时跳过创建一个新函数，而且由于函数引用每次都相同，纯（或记忆化）组件不会将其视为不同的函数。因此，它不会每次都不必要地重新渲染整个组件。即使是自定义实现shouldComponentUpdate也会有同样的问题，除非你完全忽略了函数 prop。
2021-03-21 13:48:34
这种方法有什么问题吗？例如，根据用户按下的按钮，我想将字符串传递给函数。我希望避免在我的组件中为每种情况创建三个函数。
2021-03-27 13:48:34
这个答案是不正确的，结果是不可靠的。请用e.currentTarget.getAttribute()
2021-03-28 13:48:34
反应 0.13.3，IE10event.target.dataset未定义但event.target.getAttribute('data-tag')有效。其他浏览器没问题。谢谢
2021-04-11 13:48:34

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

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

2021-03-29 13:48:34
但您不再获得传递的事件对象。
2021-04-01 13:48:34
它更干净，但如果你做很多绑定，所有这些绑定都会影响性能。
2021-04-04 13:48:34
@chovy 如果我错了，请纠正我，但不是所有的 javascript 函数都固有可变参数吗？我还没有对此进行测试，但我认为“事件对象”仍在通过。它只是不在与以前相同的参数索引处。以上述方式进行绑定就像unshift对函数参数数组进行绑定。如果“事件对象”在 index 处，0它现在将在 index 处1。
2021-04-07 13:48:34
@chovy 如果需要，您可以。做就是了removeTag: function(i, evt) {
2021-04-08 13:48:34

这是我找到的最好方法：

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

这些属性存储在“NamedNodeMap”中，您可以使用 getNamedItem 方法轻松访问它。

我已经.value按照@Wikunia 的建议编辑了答案以在最后添加
2021-03-30 13:48:34
您可能想要添加一个.value以获得实际值
2021-04-03 13:48:34

或者您可以使用闭包：

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 
}
谢谢，都铎。尝试了您的解决方案，即使没有绑定也能正常工作。我用它来切换 e.target 上的样式。
2021-03-20 13:48:34
你怎么知道一个内部函数将包含事件 args ？
2021-03-29 13:48:34 
// Method inside the component
userClick(event){
 let tag = event.currentTarget.dataset.tag;
 console.log(tag); // should return Tagvalue
}
// when render element
<a data-tag="TagValue" onClick={this.userClick}>Click me</a>
在你的代码中添加一些描述，让其他人理解代码
2021-04-02 13:48:34
其它你可能感兴趣的问题
上一篇Vue 中的方法与计算 下一篇将 JavaScript 字符串转换为全小写？