it-swarm.com.ru

Как получить доступ к пользовательским атрибутам из объекта события в 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"]

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

165
andriy_sof

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

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

147
Jared Forsyth

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

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

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

202
Sophie Alpert

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

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

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

42
roctimo

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

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
Tudor Campean

Начиная с 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}); 
}
7
tytk
// 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>
7
Mentori
<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 работает для меня

6
Manindra Gautam

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

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

data-mydatafield = "asdasdasdaad"

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

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

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

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

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

1
Eduardo

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

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

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

event.target.dataset.tag
0
Rameez Iqbal