¿Cómo acceder a atributos personalizados desde un objeto de evento en React?
React puede representar atributos personalizados como se describe en http://facebook.github.io/react/docs/jsx-gotchas.html :
Si desea utilizar un atributo personalizado, debe anteponerle datos-.
<div data-custom-attribute="foo" />
Y esa es una gran noticia, excepto que no puedo encontrar una manera de acceder desde el objeto de evento, por ejemplo:
render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
this.setState({inputVal: event.target????});
},
El elemento y data-la propiedad se representan bien en html. styleTambién se puede acceder a propiedades estándar como event.target.styleesta. En lugar de event.targetlo intenté:
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"]
Ninguno de estos funcionó.
event.targetle proporciona el nodo DOM nativo, entonces necesita usar las API DOM normales para acceder a los atributos. Aquí hay documentos sobre cómo hacerlo: Uso de atributos de datos .
Puedes hacer cualquiera event.target.dataset.tago event.target.getAttribute('data-tag'); cualquiera de los dos funciona.
Para ayudarlo a obtener el resultado deseado quizás de una manera diferente a la que solicitó:
render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
...
},
removeTag: function(i) {
// do whatever
},
Observe la bind(). Como todo esto es javascript, puedes hacer cosas útiles como esa. Ya no necesitamos adjuntar datos a los nodos DOM para realizar un seguimiento de ellos.
En mi opinión, esto es mucho más limpio que depender de eventos DOM.
Actualización de abril de 2017: estos días escribiría onClick={() => this.removeTag(i)}en lugar de.bind
Esta es la mejor manera que encontré:
var attribute = event.target.attributes.getNamedItem('data-tag').value;
Esos atributos se almacenan en un "NamedNodeMap", al que puede acceder fácilmente con el método getNamedItem.
O puedes usar un cierre:
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
}
