Come accedere agli attributi personalizzati dall'oggetto evento in React?

React è in grado di eseguire il rendering di attributi personalizzati come descritto su http://facebook.github.io/react/docs/jsx-gotchas.html :

Se si desidera utilizzare un attributo personalizzato, è necessario aggiungere un prefisso con dati-.

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

E questa è un'ottima notizia tranne che non riesco a trovare un modo per accedervi dall'oggetto evento, ad esempio:

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

L'elemento e la data-proprietà vengono visualizzati in HTML fine. Le proprietà standard come stylesono accessibili come event.target.stylebene. Invece di event.targetaver provato:

 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"]

nessuno di questi ha funzionato.

Per aiutarti a ottenere il risultato desiderato in un modo forse diverso da quello che hai chiesto:

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

Notare il bind(). Perché questo è tutto javascript, puoi fare cose utili come quelle. Non è più necessario allegare dati ai nodi DOM per tenerne traccia.

IMO questo è molto più pulito che fare affidamento su eventi DOM.

Aggiornamento aprile 2017: Oggi scriverei onClick={() => this.removeTag(i)}invece di.bind

event.targetti dà il nodo DOM nativo, quindi devi usare le normali API DOM per accedere agli attributi. Ecco alcuni documenti su come farlo: Utilizzo degli attributi dei dati .

Puoi fare uno event.target.dataset.tago event.target.getAttribute('data-tag'); uno dei due funziona.

Ecco il modo migliore che ho trovato:

var attribute = event.target.attributes.getNamedItem('data-tag').value;

Tali attributi sono memorizzati in "NamedNodeMap", a cui è possibile accedere facilmente con il metodo getNamedItem.

Oppure puoi usare una chiusura:

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 partire da React v16.1.1 (2017), ecco la soluzione ufficiale: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP dovrebbe fare:

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>

quindi e.currentTarget.attributes['tag'].valuefunziona per me

Puoi accedere agli attributi dei dati in questo modo

event.target.dataset.tag

Questa singola riga di codice ha risolto il problema per me:

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

Non conosco React, ma nel caso generale puoi passare attributi personalizzati come questo:

1) definire all'interno di un tag html un nuovo attributo con prefisso dati

data-mydatafield = "asdasdasdaad"

2) ottenere da JavaScript con

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

Se qualcuno sta cercando di utilizzare event.target in React e trova un valore nullo, è perché un SyntheticEvent ha sostituito event.target. SyntheticEvent ora contiene 'currentTarget', come in event.currentTarget.getAttribute ('data-username').

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

Sembra che React lo faccia in modo che funzioni su più browser. È possibile accedere alle vecchie proprietà tramite un attributo nativeEvent.

Prova invece di assegnare le proprietà dom (che è lento) passa semplicemente il tuo valore come parametro per la funzione che crea effettivamente il gestore:

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

Puoi semplicemente usare l' oggetto event.target.dataset . Questo ti darà l'oggetto con tutti gli attributi di dati.

In React non hai bisogno dei dati html, usa una funzione restituisce un'altra funzione; in questo modo è molto semplice inviare parametri personalizzati e puoi accedere ai dati personalizzati e all'evento.

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