Як отримати доступ до спеціальних атрибутів з об’єкта події в 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. Стандартні властивості, як, наприклад, 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, щоб відстежувати їх.

IMO це набагато чіткіше, ніж покладатися на події DOM.

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

event.targetдає вам власний вузол DOM, тоді вам потрібно використовувати звичайні API DOM для доступу до атрибутів. Ось документи, як це зробити: Використання атрибутів даних .

Ви можете робити 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 ("дані-ім'я користувача").

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}); 
},