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

React 能够呈现自定义属性 http://facebook.github.io/react/docs/jsx-gotchas.html:

如果你想使用一个自定义属性，你应该给它加上 数据- .

这是一个好消息，除了我找不到一种方法来访问它从事件对象，例如:

render: function() {
...

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

这些都没用。

315631 次浏览
小开

event.target给了你原生DOM节点，然后你需要使用常规的DOM api来访问属性。下面是关于如何做到这一点的文档:使用数据属性。

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

小开
最佳答案

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

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

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

在我看来，这比依赖DOM事件要干净得多。

这些天我会写onClick={() => this.removeTag(i)}而不是.bind

小开

或者你可以使用闭包:

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
}
小开

这是我发现的最好的方法:

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

这些属性存储在“NamedNodeMap”中，可以通过getNamedItem方法轻松访问。

小开

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

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

data-mydatafield = "asdasdasdaad"

2) get from javascript with

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

在React中，你不需要html数据，使用函数返回另一个函数;像这样，它是非常简单的发送自定义参数，你可以访问自定义数据和事件。

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
this.setState({inputVal: i});
},
小开 
// 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>
小开

如果有人想用事件。target在React中找到一个空值，这是因为一个SyntheticEvent替换了event.target。SyntheticEvent现在持有'currentTarget'，例如在event.currentTarget.getAttribute('data-username')中。

https://facebook.github.io/react/docs/events.html

看起来React这样做是为了在更多的浏览器上工作。您可以通过nativeEvent属性访问旧的属性。

小开

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

TLDR: OP应该做:

render: function() {
...
<a style={showStyle} onClick={(e) => this.removeTag(i, e)}></a>
...
removeTag: function(i, event) {
this.setState({inputVal: i});
}
小开 
<div className='btn' onClick={(e) =>
console.log(e.currentTarget.attributes['tag'].value)}
tag='bold'>
<i className='fa fa-bold' />
</div>

所以e.currentTarget.attributes['tag'].value适用于我

小开

尝试而不是分配dom属性(这是缓慢的)，只是将你的值作为参数传递给实际创建你的处理程序的函数:

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

您可以像这样访问数据属性

event.target.dataset.tag
小开

这一行代码为我解决了问题:

event.currentTarget.getAttribute('data-tag')
小开

你可以简单地使用event.target.dataset对象。这将为您提供具有所有数据属性的对象。

小开

我认为建议绑定所有需要使用React中定义的this.setState方法的方法。组件类，在构造函数中，你的构造函数应该是这样的

    constructor() {
super()
//This binding removeTag is necessary to make `this` work in the callback
this.removeTag = this.removeTag.bind(this)
}
removeTag(event){
console.log(event.target)
//use Object destructuring to fetch all element values''
const {style, dataset} = event.target
console.log(style)
console.log(dataset.tag)
}
render() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
...},

关于对象解构的更多参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring < / p >

小开

这对我很管用……我的属性名为"attr"在这个例子中。

e.target.selectedOptions[0].attributes.attr.value
小开

如果你有多个不同数据标签(年龄，姓名，电子邮件)的图标:

       <button
data-label="name"
onMouseOver={handleValue}
className="icon"
>
<FaUser />
</button>

当鼠标在图标上时，你可以通过访问data-label来改变标题

const handleValue = (e) => {
// making sure mouse is over an icon
if (e.target.classList.contains("icon")) {
const newValue = e.target.dataset.label;
setTitle(newValue);
setValue(person[newValue]);
}
};

提交答案