这是个好消息,除了我找不到从事件对象访问它的方法,例如:render: function() {...

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

javascript facebook reactjs

133154 观看

12回复

758 作者的声誉

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

这些都没有奏效。

作者: andriy_sof 的来源 发布者: 2013 年 12 月 4 日

回应 (12)


199

96377 作者的声誉

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

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes#JavaScript_Access

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

作者: Sophie Alpert 发布者: 04.12.2013 06:41

146

8218 作者的声誉

决定

为了帮助您以与您提出的不同的方式获得理想的结果:

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 发布者: 07.12.2013 09:21

23

331 作者的声誉

或者你可以使用一个闭包:

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 
}
作者: Tudor Campean 发布者: 09.02.2014 08:14

40

699 作者的声誉

这是我发现的最佳方式:

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

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

作者: roctimo 发布者: 29.07.2015 04:46

-1

9 作者的声誉

这也有效:

var attribute = $(event.target.attributes ['data-tag'])。val();

作者: shkherad 发布者: 05.01.2017 06:42

2

158 作者的声誉

我不知道React,但在一般情况下你可以传递这样的自定义属性:

1)在html-tag内部定义一个带有data-prefix的新属性

data-mydatafield = "asdasdasdaad"

2)从javascript获取

e.target.attributes.getNamedItem("data-mydatafield").value 
作者: jimver04 发布者: 16.02.2017 10:29

-1

363 作者的声誉

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

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
    this.setState({inputVal: i}); 
},
作者: miguel savignano 发布者: 14.06.2017 09:11

7

136 作者的声誉

// 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>
作者: Mentori 发布者: 29.08.2017 12:14

1

11 作者的声誉

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

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

它看起来像React这样做,以便它适用于更多的浏览器。您可以通过nativeEvent属性访问旧属性。

作者: Eduardo 发布者: 21.09.2017 05:33

7

841 作者的声誉

从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}); 
}
作者: tytk 发布者: 26.11.2017 07:47

3

72 作者的声誉

<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对我有用

作者: Manindra Gautam 发布者: 28.01.2018 08:03

0

1 作者的声誉

如何获取react的属性值元素,而不是html的元素。在页面顶部解释的所有方法都可以获得渲染后元素的属性值,即获取元素html属性的值。但我需要得到元素的属性值反应。请不要说我使用状态。我想要getAtteribute。

作者: mohamadreza hajebi 发布者: 02.02.2019 10:13
32x32