Wie kann ich über ein Ereignisobjekt in React auf benutzerdefinierte Attribute zugreifen?

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 stylekann als gut zugegriffen werden event.target.style. Stattdessen habe event.targetich 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.

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

event.targetWenn 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.tagoder tun event.target.getAttribute('data-tag'); entweder funktioniert einer.

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.

Oder Sie können einen Verschluss 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 
}

// 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>

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:

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>

so e.currentTarget.attributes['tag'].valuefunktioniert bei mir

Sie können auf Datenattribute wie diese zugreifen

event.target.dataset.tag

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

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

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

data-mydatafield = "asdasdasdaad"

2) aus Javascript mit bekommen

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

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.

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:

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

Sie können einfach das Objekt event.target.dataset verwenden . Dadurch erhalten Sie das Objekt mit allen Datenattributen.

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.

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