javascript - practicas - ¿Cómo acceder a los atributos personalizados del objeto de evento en React?

react comunicacion entre componentes

Question

React puede mostrar atributos personalizados como se describe en http://facebook.github.io/react/docs/jsx-gotchas.html :

Si desea usar un atributo personalizado, debe agregarle un prefijo con datos-.

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

Y esa es una gran noticia, excepto que no puedo encontrar una forma de acceder a ella 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 propiedad de data- procesan en html fine. Se puede acceder a propiedades estándar como el style como event.target.style fine. En lugar de event.target , probé:

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

Answer 1

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 debería hacer:

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

Answer 2

En React no necesita los datos html, use una función return a otra función; así es muy simple enviar params 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}); 
},

Answer 3

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 se puede acceder fácilmente con el método getNamedItem.

Answer 4

Esto también funciona:

var attribute = $ (event.target.attributes [''data-tag'']). val ();

Answer 5

No sé acerca de 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 

Answer 6

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 
}

Answer 7

Para ayudarlo a obtener el resultado deseado de una manera diferente a como lo hizo:

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

Observe el bind() . Como esto es todo javascript, puedes hacer cosas prácticas como esa. Ya no es necesario adjuntar datos a los nodos DOM con el fin de realizar un seguimiento de ellos.

IMO esto es mucho más limpio que confiar en los eventos DOM.

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

Answer 8

Si alguien está intentando usar event.target en React y encuentra un valor nulo, es porque 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.

Answer 9

<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''].value funciona para mí

Answer 10

event.target te proporciona el nodo DOM nativo, luego debes usar las API regulares DOM para acceder a los atributos. Aquí hay documentos sobre cómo hacer eso:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes#JavaScript_Access

Puede hacer event.target.dataset.tag o event.target.getAttribute(''data-tag'') ; cualquiera de los dos funciona

Answer 11

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