javascript - Hvordan få tilgang til egendefinerte attributter fra hendelsesobjektet i React?

React kan gjengi tilpassede attributter som beskrevet på http://facebook.github.io/react/docs/jsx-gotchas.html:

Hvis du vil bruke et tilpasset attributt, bør du prefiksere det med data-.

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

Og det er gode nyheter, bortsett fra at jeg ikke finner en måte å få tilgang til det fra hendelsesobjektet, f.eks.:

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

Elementet og data--egenskapen gjengis fint i HTML. Standardegenskaper som style kan aksesseres som event.target.style uten problemer. I stedet for event.target prøvde jeg:

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

ingen av disse fungerte.

Svar #1

event.target gir deg den native DOM-node, da må du bruke de vanlige DOM-APIene for å få tilgang til attributter. Her er dokumentasjon om hvordan du gjør det: Bruke dataattributter.

Du kan bruke enten event.target.dataset.tag eller event.target.getAttribute('data-tag'); begge fungerer.

Svar #2

For å hjelpe deg med å oppnå ønsket resultat på kanskje en annen måte enn du ba om:

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

Legg merke til bind(). Fordi dette er all javascript, kan du gjøre nyttige ting som det. Vi trenger ikke lenger å knytte data til DOM-noder for å holde styr på dem.

Etter min mening er dette mye renere enn å stole på DOM-hendelser.

Oppdatering april 2017: Nå for tiden ville jeg skrevet onClick={() => this.removeTag(i)} i stedet for .bind

Svar #3

Her er den beste måten jeg har funnet på:

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

Disse attributtene lagres i en "NamedNodeMap", som du enkelt kan få tilgang til med metoden getNamedItem.

Svar #4

Eller du kan bruke en closure :

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 
}

Svar #5

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

Svar #6

<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

så e.currentTarget.attributes['tag'].value fungerer for meg

Relaterte artikler