Como acessar atributos personalizados do objeto de evento no React?

O React é capaz de renderizar atributos personalizados, conforme descrito em http://facebook.github.io/react/docs/jsx-gotchas.html :

Se você quiser usar um atributo customizado, prefixe-o com data-.

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

E isso é uma ótima notícia, exceto que não consigo encontrar uma maneira de acessá-lo a partir do objeto de evento, por exemplo:

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

O elemento e a data-propriedade são renderizados em html fine. Propriedades padrão como stylepodem ser acessadas como event.target.styleperfeitas. Em vez de event.targeteu tentei:

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

nada disso funcionou.

Para ajudá-lo a obter o resultado desejado de uma maneira talvez diferente da solicitada:

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

Observe o bind() . Como tudo isso é javascript, você pode fazer coisas úteis assim. Não precisamos mais anexar dados aos nós do DOM para controlá-los.

Na IMO, isso é muito mais limpo do que depender de eventos DOM.

Atualização de abril de 2017: Hoje em dia eu escreveria em onClick={() => this.removeTag(i)}vez de.bind

event.targetfornece o nó DOM nativo, você precisa usar as APIs DOM regulares para acessar atributos. Aqui estão os documentos sobre como fazer isso: Usando atributos de dados .

Você pode fazer um event.target.dataset.tagou event.target.getAttribute('data-tag'); qualquer um funciona.

Aqui está a melhor maneira que encontrei:

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

Esses atributos são armazenados em um "NamedNodeMap", que você pode acessar facilmente com o método getNamedItem.

Ou você pode usar um fechamento:

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 do React v16.1.1 (2017), aqui está a solução oficial: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP deve fazer:

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>

então e.currentTarget.attributes['tag'].valuefunciona para mim

Você pode acessar atributos de dados algo como isto

event.target.dataset.tag

Esta única linha de código resolveu o problema para mim:

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

Eu não sei sobre o React, mas no caso geral, você pode transmitir atributos personalizados como este:

1) defina dentro de uma tag html um novo atributo com prefixo de dados

data-mydatafield = "asdasdasdaad"

2) obtenha do javascript com

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

Se alguém estiver tentando usar event.target no React e encontrar um valor nulo, é porque um SyntheticEvent substituiu o event.target. O SyntheticEvent agora contém 'currentTarget', como em event.currentTarget.getAttribute ('data-username').

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

Parece que o React faz isso para que funcione em mais navegadores. Você pode acessar as propriedades antigas por meio de um atributo nativeEvent.

Tente, em vez de atribuir propriedades dom (que é lenta), apenas passe seu valor como um parâmetro para a função que realmente cria seu manipulador:

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

Você pode simplesmente usar o objeto event.target.dataset . Isso fornecerá o objeto com todos os atributos de dados.

No React, você não precisa dos dados html, use uma função return uma outra função; assim, é muito simples enviar parâmetros personalizados e você pode acessar os dados personalizados e o evento.

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