web-dev-qa-db-fra.com

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

React est capable de restituer les attributs personnalisés comme décrit à l’adresse http://facebook.github.io/react/docs/jsx-gotchas.html :

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

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

Et ce sont d'excellentes nouvelles, sauf que je ne trouve pas le moyen d'y accéder à partir de l'objet é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 propriété data- sont rendus au format HTML. On peut accéder aux propriétés standard telles que style en tant que event.target.style fine . Au lieu de event.target, j'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"]

aucun de ceux-ci n'a fonctionné. 

javascriptfacebookreactjs
147
andriy_sof

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
},

Notez la 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 pouvoir les suivre.

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

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

147
Jared Forsyth

event.target vous donne le nœud DOM natif. Vous devez ensuite utiliser les API DOM classiques pour accéder aux attributs. Voici la documentation sur comment faire cela:

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

Vous pouvez faire event.target.dataset.tag ou event.target.getAttribute('data-tag'); soit on travaille.

202
Sophie Alpert

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.

42
roctimo

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 
}
23
Tudor Campean

À compter de 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}); 
}
7
tytk
// 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>
7
Mentori
<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

alors e.currentTarget.attributes['tag'].value fonctionne pour moi

6
Manindra Gautam

Je ne connais pas React, mais dans le cas général, vous pouvez transmettre des attributs personnalisés comme ceci:

1) définir à l'intérieur d'une balise html un nouvel attribut avec le préfixe data 

data-mydatafield = "asdasdasdaad"

2) obtenir de javascript avec 

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

Vous pouvez accéder aux attributs de données quelque chose comme ça

event.target.dataset.tag
1
Rameez Iqbal

Si quelqu'un essaie d'utiliser event.target dans React et trouve une valeur null, c'est parce qu'un événement SyntheticEvent a remplacé l'événement.target. SyntheticEvent contient maintenant 'currentTarget', comme dans event.currentTarget.getAttribute ('data-username'). 

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

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

1
Eduardo

Essayez, au lieu d’affecter des propriétés de dom (ce qui est lent), transmettez simplement votre valeur en tant que paramètre pour 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});
}
0
msangel

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

event.currentTarget.getAttribute('data-tag')
0
Emeka Augustine