Comment accéder aux attributs personnalisés de l'objet événement dans React?

React est capable de restituer des attributs personnalisés comme décrit sur http://facebook.github.io/react/docs/jsx-gotchas.html :

Si vous souhaitez utiliser un attribut personnalisé, vous devez le préfixer avec data-.

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

Et c'est une excellente nouvelle, sauf que je ne peux pas trouver un moyen d'y accéder à partir de l'événement, par exemple:

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

L'élément et la data-propriété s'affichent correctement en html. Les propriétés standard comme stylepeuvent être consultées aussi event.target.stylebien. Au lieu de event.targetj'ai essayé:

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

rien de tout cela n'a fonctionné.

Pour vous aider à obtenir le résultat souhaité d'une manière peut-être différente de celle que vous avez demandée:

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

Remarquez le bind(). Parce que tout cela est javascript, vous pouvez faire des choses pratiques comme ça. Nous n'avons plus besoin de joindre des données aux nœuds DOM pour en garder la trace.

OMI, c'est beaucoup plus propre que de compter sur les événements DOM.

Mise à jour d'avril 2017: ces jours-ci, j'écrirais onClick={() => this.removeTag(i)}au lieu de.bind

event.targetvous donne le nœud DOM natif, vous devez alors utiliser les API DOM normales pour accéder aux attributs. Voici des documents sur la façon de procéder: Utilisation des attributs de données .

Vous pouvez faire soit event.target.dataset.tagou event.target.getAttribute('data-tag'); l'un ou l'autre fonctionne.

Voici le meilleur moyen que j'ai trouvé:

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

Ces attributs sont stockés dans un "NamedNodeMap", auquel vous pouvez accéder facilement avec la méthode getNamedItem.

Ou vous pouvez utiliser une fermeture:

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>

Depuis React v16.1.1 (2017), voici la solution officielle: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP devrait faire:

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>

e.currentTarget.attributes['tag'].valuefonctionne donc pour moi

Vous pouvez accéder aux attributs de données comme ceci

event.target.dataset.tag

Cette seule ligne de code a résolu le problème pour moi:

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

Je ne connais pas React, mais dans le cas général, vous pouvez passer des attributs personnalisés comme celui-ci:

1) définir à l'intérieur d'une balise html un nouvel attribut avec préfixe de données

data-mydatafield = "asdasdasdaad"

2) Obtenez de javascript avec

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

Si quelqu'un essaie d'utiliser event.target dans React et trouve une valeur nulle, c'est parce qu'un SyntheticEvent a remplacé event.target. Le SyntheticEvent contient désormais «currentTarget», comme dans event.currentTarget.getAttribute («data-username»).

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

Il semble que React le fasse pour qu'il fonctionne sur plus de navigateurs. Vous pouvez accéder aux anciennes propriétés via un attribut nativeEvent.

Essayez au lieu d'attribuer des propriétés dom (ce qui est lent), passez simplement votre valeur en tant que paramètre à la fonction qui crée réellement votre gestionnaire:

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

Vous pouvez simplement utiliser l' objet event.target.dataset . Cela vous donnera l'objet avec tous les attributs de données.

Dans React vous n'avez pas besoin des données html, utilisez une fonction pour retourner une autre fonction; comme cela, il est très simple d'envoyer des paramètres personnalisés et vous pouvez accéder aux données personnalisées et à l'événement.

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