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

event.target предоставляет вам собственный DOM node, тогда вам нужно использовать обычные 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'); либо работает.

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

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 
}

Начиная с 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}); 
}

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

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

Я не знаю об 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});
}

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

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

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

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

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