248

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

这些都不起作用。

4

15 回答 15

361

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

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

于 2013-12-04T18:41:11.993 回答
180

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

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

于 2013-12-07T21:21:37.600 回答
56

这是我发现的最好方法：

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

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

于 2015-07-29T16:46:36.797 回答
25

或者您可以使用闭包：

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 
}
于 2014-02-09T20:14:01.810 回答
23 
// 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>
于 2017-08-29T12:14:26.917 回答
10 
<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对我有用

于 2018-01-28T08:03:02.337 回答
8

从 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}); 
}
于 2017-11-26T19:47:02.403 回答
7

这行代码为我解决了这个问题：

event.currentTarget.getAttribute('data-tag')
于 2019-08-05T03:21:45.817 回答
6

您可以访问类似这样的数据属性

event.target.dataset.tag
于 2019-04-30T11:14:37.817 回答
4

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

于 2020-03-18T05:23:46.070 回答
3

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

1) 在 html-tag 中定义一个带有 data- 前缀的新属性

data-mydatafield = "asdasdasdaad"

2）从javascript中获取

e.target.attributes.getNamedItem("data-mydatafield").value
于 2017-02-16T10:29:48.720 回答
3

如果有人试图在 React 中使用 event.target 并找到一个空值，那是因为 SyntheticEvent 已经替换了 event.target。SyntheticEvent 现在包含“currentTarget”，例如在 event.currentTarget.getAttribute('data-username') 中。

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

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

于 2017-09-21T17:33:11.000 回答
3

尝试而不是分配 dom 属性（这很慢），只需将您的值作为参数传递给实际创建处理程序的函数：

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag = (customAttribute) => (event) => {
    this.setState({inputVal: customAttribute});
}
于 2019-02-04T13:47:33.503 回答
0

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

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
    this.setState({inputVal: i}); 
},
于 2017-06-14T09:11:35.163 回答
0

我认为建议绑定所有需要使用this.setState方法的方法，该方法在 React.Component 类中定义，在构造函数内部，在你的情况下你的构造函数应该像

    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

于 2020-07-09T10:30:10.543 回答