[FIXED] Wie greife ich auf benutzerdefinierte Attribute vom Ereignisobjekt in React zu?

Ausgabe

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 ihm data- voranstellen.

<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. B.:

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

Das Element und data-die Eigenschaft werden in HTML gut gerendert. Auf Standardeigenschaften wie stylekann ebenso gut zugegriffen werden event.target.style. Anstelle von event.targethabe 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"]

nichts davon hat funktioniert.

Lösung

Um Ihnen zu helfen, das gewünschte Ergebnis vielleicht auf eine andere Art und Weise zu erzielen, als Sie gefragt haben:

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 sie zu verfolgen.

IMO ist dies viel sauberer, als sich auf DOM-Ereignisse zu verlassen.

Update April 2017: InonClick={() => this.removeTag(i)} diesen Tagen würde ich stattdessen schreiben.bind


Beantwortet von –
Jared Forsyth


Antwort geprüft von –
Marilyn (FixError Volunteer)

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like