Как получить доступ к пользовательским атрибутам из объекта события в React?

React может отображать пользовательские атрибуты, как описано в http://facebook.github.io/react/docs/jsx-gotchas.html:

если вы хотите использовать пользовательский атрибут, вы должны добавлять данные.-

<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 fine. Стандартное свойство как 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"]

ничего из этого не сработало.

137
facebook javascript reactjs

11 ответов

чтобы помочь вам получить желаемый результат, возможно, по-другому, чем вы просили:

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: в эти дни я бы написал onClick={() => this.removeTag(i)} вместо .bind

140

event.target дает вам собственный узел DOM, тогда вам нужно использовать обычные API DOM для доступа к атрибутам. Вот документы о том, как это сделать:

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

вы можете сделать что-либо event.target.dataset.tag или event.target.getAttribute('data-tag'); либо один работает.

188

вот лучший способ, который я нашел:

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

эти атрибуты хранятся в" NamedNodeMap", к которому вы можете легко получить доступ с помощью метода getNamedItem.

35

или вы можете использовать замыкание :

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 
}
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>
6

по состоянию на 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}); 
}
5

Я не знаю о React, но в общем случае вы можете передать пользовательские атрибуты следующим образом:

1) Определите внутри html-тега новый атрибут с префиксом данных 

data-mydatafield = "asdasdasdaad"

2) получить из javascript с 

e.target.attributes.getNamedItem("data-mydatafield").value
2
<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 для меня

2

Если кто-то пытается использовать события.target в React и поиске значения null, это потому, что SyntheticEvent заменил событие.цель. SyntheticEvent теперь содержит "currentTarget", например, в событии.currentTarget.getAttribute ('data-username').

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

похоже, что React делает это, чтобы он работал в других браузерах. Вы можете открыть старые свойства через nativeEvent атрибут.

1

Это тоже работает:

атрибут var = $(event.цель.атрибуты ['data-tag']).val ();

0

в React вам не нужны данные html, используйте функцию, возвращающую другую функцию; как это очень просто отправить пользовательские параметры, и вы можете получить доступ к пользовательским данным и событию. 

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
    this.setState({inputVal: i}); 
},
-1