Как получить доступ к пользовательским атрибутам из объекта события в 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- свойство render в html отлично. Стандартные свойства, такие как style, могут быть доступны как event.target.style fine. Вместо 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"]

никто из них не работал.

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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 
}

Ответ 5

// 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

TL;DR: OP должен делать:

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

Ответ 7

<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 у меня работает

Ответ 8

Вы можете получить доступ к атрибутам данных примерно так

event.target.dataset.tag

Ответ 9

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

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

data-mydatafield = "asdasdasdaad"

2) получить от javascript с помощью

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

Ответ 10

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

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

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

Ответ 11

Попробуйте вместо присвоения свойств dom (что медленно) просто передайте свое значение в качестве параметра функции, которая фактически создает ваш обработчик:

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

Ответ 12

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

Ответ 13

Эта единственная строка кода решила проблему для меня:

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

Ответ 14

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

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

Ответ 15

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

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