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)
