wake-up-neo.com

Wie kann auf benutzerdefinierte Attribute über das Ereignisobjekt in React zugegriffen werden?

React kann benutzerdefinierte Attribute wie unter http://facebook.github.io/react/docs/jsx-gotchas.html beschrieben darstellen.

Wenn Sie ein benutzerdefiniertes Attribut verwenden möchten, sollten Sie es mit .__ voranstellen. Daten-.

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

Und das sind großartige Neuigkeiten, es sei denn, ich kann vom Ereignisobjekt aus z. B. keinen Zugriff darauf finden.

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

Das Element und die data--Eigenschaft werden in html fine dargestellt. Auf Standardeigenschaften wie style kann als event.target.style fine ..__ zugegriffen werden. Anstelle von event.target habe ich Folgendes versucht:

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

keiner von diesen hat funktioniert. 

javascriptfacebookreactjs
147
andriy_sof

Um Ihnen zu helfen, das gewünschte Ergebnis auf eine andere Weise als gewünscht zu erzielen:

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

Beachten Sie die bind(). Da dies alles Javascript ist, können Sie praktische Dinge wie diese tun. Wir müssen keine Daten mehr an DOM-Knoten anhängen, um sie nachverfolgen zu können.

IMO Dies ist viel sauberer als auf DOM-Ereignisse.

Update April 2017: In diesen Tagen würde ich onClick={() => this.removeTag(i)} anstelle von .bind schreiben.

147
Jared Forsyth

event.target gibt Ihnen den nativen DOM-Knoten. Dann müssen Sie die regulären DOM-APIs verwenden, um auf Attribute zuzugreifen. Hier sind Dokumente, wie das geht:

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

Sie können entweder event.target.dataset.tag oder event.target.getAttribute('data-tag'); beide arbeiten.

202
Sophie Alpert

Hier ist der beste Weg, den ich gefunden habe:

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

Diese Attribute werden in einer "NamedNodeMap" gespeichert, auf die Sie mit der Methode getNamedItem problemlos zugreifen können.

42
roctimo

Oder Sie können eine Schließung verwenden:

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

Ab React v16.1.1 (2017) ist hier die offizielle Lösung: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: Das OP sollte Folgendes tun:

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>

so funktioniert e.currentTarget.attributes['tag'].value für mich

6
Manindra Gautam

Ich weiß nichts über React, aber im allgemeinen Fall können Sie benutzerdefinierte Attribute wie folgt übergeben:

1) In einem HTML-Tag ein neues Attribut mit Daten-Präfix definieren 

data-mydatafield = "asdasdasdaad"

2) bekomme von Javascript mit 

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

Sie können auf Datenattribute wie diese zugreifen

event.target.dataset.tag
1
Rameez Iqbal

Wenn jemand versucht, event.target in React zu verwenden und einen Nullwert zu finden, liegt dies daran, dass ein SyntheticEvent das event.target ersetzt hat. Das SyntheticEvent enthält jetzt 'currentTarget', beispielsweise in event.currentTarget.getAttribute ('data-username'). 

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

Es sieht so aus, als würde React dies tun, damit es mit mehr Browsern funktioniert. Sie können auf die alten Eigenschaften über ein nativeEvent-Attribut zugreifen.

1
Eduardo

Versuchen Sie, anstatt dom-Eigenschaften zuzuweisen (was langsam ist), übergeben Sie einfach Ihren Wert als Parameter an die Funktion, die Ihren Handler tatsächlich erstellt:

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

Diese einzelne Codezeile löste das Problem für mich:

event.currentTarget.getAttribute('data-tag')
0
Emeka Augustine