React kann benutzerdefinierte Attribute rendern, wie unter http://facebook.github.io/react/docs/jsx-gotchas.html beschrieben :
Wenn Sie ein benutzerdefiniertes Attribut verwenden möchten, sollten Sie es mit dem Präfix data- versehen.
<div data-custom-attribute="foo" />
Und das sind großartige Neuigkeiten, außer dass ich keine Möglichkeit finde, über das Ereignisobjekt darauf zuzugreifen, z.
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 gut gerendert. Auf Standardeigenschaften wie style
kann als gut zugegriffen werden event.target.style
. Stattdessen habe event.target
ich 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"]
keines davon funktionierte.
javascript
facebook
reactjs
andriy_sof
quelle
quelle
aria-modal=true
hat. Sie verschieben die Änderungen (auf false) in den Speicher der Arien- / Datenattribute, aber nichts anderes wird geändert (wie der Inhalt oder die Klasse oder die Variablen der Komponente), da ReactJs aria / nicht aktualisiert . Daten attrs dass Komponenten. Ich habe den ganzen Tag herumgespielt, um das zu realisieren.Antworten:
Um Ihnen zu helfen, das gewünschte Ergebnis auf eine andere Weise als gewünscht zu erzielen:
Beachten Sie die
bind()
. Da dies alles Javascript ist, können Sie solche praktischen Dinge tun. Wir müssen keine Daten mehr an DOM-Knoten anhängen, um diese zu verfolgen.IMO ist dies viel sauberer als sich auf DOM-Ereignisse zu verlassen.
Update April 2017: In diesen Tagen würde ich
onClick={() => this.removeTag(i)}
statt schreiben.bind
quelle
unshift
die Funktion ing Argumente Array. Wenn sich das "Ereignisobjekt" im Index befindet, befindet0
es sich jetzt im Index1
.removeTag: function(i, evt) {
event.target
Wenn Sie den nativen DOM-Knoten erhalten, müssen Sie die regulären DOM-APIs verwenden, um auf Attribute zuzugreifen. Hier finden Sie Dokumente dazu: Verwenden von Datenattributen .Sie können entweder
event.target.dataset.tag
oder tunevent.target.getAttribute('data-tag')
; entweder funktioniert einer.quelle
event.target.dataset
ist undefiniert,event.target.getAttribute('data-tag')
funktioniert aber . Die anderen Browser sind in Ordnung. Vielen DankshouldComponentUpdate
hätte das gleiche Problem, wenn Sie die Funktionsstütze nicht vollständig ignoriert hätten.event.currentTarget.getAttibute('data-tag')
Hier ist der beste Weg, den ich gefunden habe:
Diese Attribute werden in einer "NamedNodeMap" gespeichert, auf die Sie mit der Methode getNamedItem problemlos zugreifen können.
quelle
.value
, um den tatsächlichen Wert zu erhalten.value
am Ende hinzuzufügen, wie @Wikunia vorgeschlagen hatOder Sie können einen Verschluss verwenden:
quelle
quelle
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: OP sollte tun:
quelle
i
ist das benutzerdefinierte Attribut, das OP irgendwie übergeben wollte. Es ist eine Variable, die im Geltungsbereich liegt, wenn dasa
Element definiert wird.so
e.currentTarget.attributes['tag'].value
funktioniert bei mirquelle
Sie können auf Datenattribute wie diese zugreifen
quelle
Diese einzelne Codezeile löste das Problem für mich:
quelle
Ich weiß nicht über React Bescheid, aber im Allgemeinen können Sie benutzerdefinierte Attribute wie folgt übergeben:
1) Definieren Sie in einem HTML-Tag ein neues Attribut mit Datenpräfix
2) aus Javascript mit bekommen
quelle
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', z. B. 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 in mehr Browsern funktioniert. Sie können über ein nativeEvent-Attribut auf die alten Eigenschaften zugreifen.
quelle
Versuchen Sie, anstatt dom-Eigenschaften zuzuweisen (was langsam ist), einfach Ihren Wert als Parameter an eine Funktion zu übergeben, die Ihren Handler tatsächlich erstellt:
quelle
Sie können einfach das Objekt event.target.dataset verwenden . Dadurch erhalten Sie das Objekt mit allen Datenattributen.
quelle
In React benötigen Sie keine HTML-Daten. Verwenden Sie eine Funktion, um eine andere Funktion zurückzugeben. Auf diese Weise ist es sehr einfach, benutzerdefinierte Parameter zu senden, und Sie können auf die benutzerdefinierten Daten und das Ereignis zugreifen.
quelle