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

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

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

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

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

Обратите внимание на bind() . Поскольку это все javascript, вы можете делать удобные вещи, как это. Нам больше не нужно прикреплять данные к узлам DOM, чтобы отслеживать их.

ИМО это намного чище, чем полагаться на события DOM.

Обновление апрель 2017: в эти дни я бы написал onClick={() => this.removeTag(i)}вместо.bind

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

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

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

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

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

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

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 
}

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

Начиная с 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у меня так работает

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

event.target.dataset.tag

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

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

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

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

data-mydatafield = "asdasdasdaad"

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

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

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

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

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

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

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

Вы можете просто использовать объект event.target.dataset . Это даст вам объект со всеми атрибутами данных.

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

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