¿Cómo acceder a los atributos personalizados desde el 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 anteponerlo con datos-.

<div data-custom-attribute="foo" />

Y esa es una gran noticia, excepto que no puedo encontrar una manera de acceder desde el objeto del 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 la data-propiedad se procesan en html bien. styleSe puede acceder a las propiedades estándar como event.target.stylebien. 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ó.

Para ayudarlo a obtener el resultado deseado tal vez 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
},

Note el bind(). Debido a que todo esto es javascript, puede 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 confiar en eventos DOM.

Actualización de abril de 2017: en estos días escribiría en onClick={() => this.removeTag(i)}lugar de.bind

event.targetle proporciona el nodo DOM nativo, luego debe usar las API DOM regulares 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.

Aquí está 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 puede 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 
}

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

A partir de React v16.1.1 (2017), aquí está la solución oficial: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP debe hacer:

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>

entonces e.currentTarget.attributes['tag'].valuefunciona para mi

Puede acceder a los atributos de datos de esta manera

event.target.dataset.tag

Esta única línea de código resolvió el problema para mí:

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

No sé sobre React, pero en el caso general puede pasar atributos personalizados como este:

1) definir dentro de una etiqueta html un nuevo atributo con prefijo de datos

data-mydatafield = "asdasdasdaad"

2) obtener de javascript con

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

Si alguien está tratando de usar event.target en React y encuentra un valor nulo, es porque un SyntheticEvent ha reemplazado el event.target. SyntheticEvent ahora contiene 'currentTarget', como en event.currentTarget.getAttribute ('data-username').

https://facebook.github.io/react/docs/events.html

Parece que React hace esto para que funcione en más navegadores. Puede acceder a las propiedades antiguas a través de un atributo nativeEvent.

Intente en lugar de asignar propiedades dom (que es lenta) simplemente pase su valor como un parámetro para funcionar que realmente cree su controlador:

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

Simplemente puede usar el objeto event.target.dataset . Esto le dará el objeto con todos los atributos de datos.

En React no necesita los datos html, use una función para devolver otra función; así es muy simple enviar parámetros personalizados y puedes acceder a los datos personalizados y al evento.

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