Jak uzyskać dostęp do niestandardowych atrybutów z obiektu zdarzenia w React?

React jest w stanie renderować niestandardowe atrybuty zgodnie z opisem na stronie http://facebook.github.io/react/docs/jsx-gotchas.html :

Jeśli chcesz użyć niestandardowego atrybutu, powinieneś go poprzedzić danymi.

<div data-custom-attribute="foo" />

I to jest dobra wiadomość, ale nie mogę znaleźć sposobu, aby uzyskać do niej dostęp z obiektu zdarzenia, np .:

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

Element i data-właściwość są renderowane w formacie HTML. styleDostęp do standardowych właściwości, takich jak, można uzyskać w event.target.styleporządku. Zamiast event.targetpróbowałem:

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

żaden z nich nie działał.

Aby pomóc Ci uzyskać pożądany rezultat w inny sposób niż poprosiłeś:

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

Zwróć uwagę na bind(). Ponieważ to wszystko jest javascript, możesz robić takie przydatne rzeczy. Nie musimy już dołączać danych do węzłów DOM w celu ich śledzenia.

IMO jest to o wiele czystsze niż poleganie na zdarzeniach DOM.

Aktualizacja kwietnia 2017 r .: W dzisiejszych czasach pisałbym onClick={() => this.removeTag(i)}zamiast.bind

event.targetdaje natywny węzeł DOM, a następnie musisz użyć zwykłych interfejsów API DOM, aby uzyskać dostęp do atrybutów. Oto dokumenty, jak to zrobić: Korzystanie z atrybutów danych .

Można wykonać jedną event.target.dataset.taglub event.target.getAttribute('data-tag'); jedno z nich działa.

Oto najlepszy sposób, jaki znalazłem:

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

Te atrybuty są przechowywane w „NamedNodeMap”, do którego można łatwo uzyskać dostęp za pomocą metody getNamedItem.

Lub możesz użyć zamknięcia:

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>

Począwszy od wersji 16.1.1 React (2017), oto oficjalne rozwiązanie: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP powinien wykonać:

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>

tak e.currentTarget.attributes['tag'].valuedziała dla mnie

Możesz uzyskać dostęp do atrybutów danych czegoś takiego

event.target.dataset.tag

Ten pojedynczy wiersz kodu rozwiązał dla mnie problem:

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

Nie wiem o React, ale w ogólnym przypadku możesz przekazać niestandardowe atrybuty:

1) Zdefiniuj w tagu HTML nowy atrybut z prefiksem danych

data-mydatafield = "asdasdasdaad"

2) pobierz z javascript za pomocą

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

Jeśli ktoś próbuje użyć event.target w React i znajduje wartość pustą, to dlatego, że SyntheticEvent zastąpił event.target. SyntheticEvent przechowuje teraz „currentTarget”, na przykład w event.currentTarget.getAttribute („data-username”).

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

Wygląda na to, że React robi to, dzięki czemu działa w wielu przeglądarkach. Możesz uzyskać dostęp do starych właściwości za pomocą atrybutu nativeEvent.

Spróbuj zamiast przypisywać właściwości dom (co jest wolne), po prostu przekaż swoją wartość jako parametr do funkcji, która faktycznie tworzy program obsługi:

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

Możesz po prostu użyć obiektu event.target.dataset . To da ci obiekt ze wszystkimi atrybutami danych.

W React nie potrzebujesz danych HTML, użyj funkcji zwróć inną funkcję; w ten sposób wysyłanie niestandardowych parametrów jest bardzo proste i można uzyskać dostęp do niestandardowych danych i zdarzenia.

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