it-swarm-tr.com

React'teki olay nesnesinden özel niteliklere nasıl erişilir?

React, özel nitelikleri, http://facebook.github.io/react/docs/jsx-gotchas.html adresinde anlatıldığı gibi yapabilir.

Özel bir özellik kullanmak istiyorsanız, onu veri-.

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

Ve bu harika bir haber, olay nesnesine erişmenin bir yolunu bulamıyorum, mesela:

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

Element ve data- özelliği, html paragrafında oluşturulur. style gibi standart özelliklere event.target.style fine ..__ olarak erişilebilir. event.target yerine şunu denedim:

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

bunların hiçbiri işe yaramadı. 

147
andriy_sof

İstediğiniz sonucu belki de sorduğunuzdan farklı bir şekilde almanıza yardımcı olmak için:

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

bind() işlevine dikkat edin. Tüm bunlar javascript olduğundan, bunun gibi kullanışlı şeyler yapabilirsiniz. Artık onları takip etmek için DOM düğümlerine veri eklememiz gerekmiyor.

IMO, DOM etkinliklerine güvenmekten çok daha temiz.

Nisan 2017 Güncellemesi: Bugünlerde .bind yerine onClick={() => this.removeTag(i)} yazardım.

147
Jared Forsyth

event.target size yerel DOM düğümünü verir, ardından niteliklere erişmek için normal DOM API'lerini kullanmanız gerekir. İşte bunun nasıl yapılacağı hakkında dokümanlar:

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

event.target.dataset.tag veya event.target.getAttribute('data-tag') işlevini yapabilirsiniz; ikisi de işe yarıyor.

202
Sophie Alpert

İşte bulduğum en iyi yol:

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

Bu özellikler getNamedItem yöntemiyle kolayca erişebileceğiniz bir "NamedNodeMap" içinde saklanır.

42
roctimo

Ya da bir kapatma kullanabilirsiniz:

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

Reac v16.1.1 (2017) 'den itibaren resmi çözüm: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP şunları yapmalı:

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>

e.currentTarget.attributes['tag'].value benim için çalışıyor

6
Manindra Gautam

React hakkında bilgim yok, ancak genel durumda bunun gibi özel nitelikleri iletebilirsiniz:

1) bir html-tag içinde data-prefix ile yeni bir özellik tanımlayın 

data-mydatafield = "asdasdasdaad"

2) javascript ile birlikte 

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

Buna benzer bir şey için veri özelliklerine erişebilirsiniz

event.target.dataset.tag
1
Rameez Iqbal

Birisi React'de event.target kullanmaya ve boş bir değer bulmaya çalışıyorsa, bunun nedeni SyntheticEvent'in event.target'in yerini almasıdır. SyntheticEvent şimdi, event.currentTarget.getAttribute ('data-username') gibi 'currentTarget' değerini tutar. 

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

React bunu daha fazla tarayıcıda çalışacak şekilde yapıyor gibi görünüyor. Eski özelliklere bir nativeEvent özniteliği yoluyla erişebilirsiniz.

1
Eduardo

Dom özelliklerini atamak yerine deneyin (ki bu yavaş) sadece işleyicinizi gerçekten yaratan bir fonksiyon olarak bir parametre olarak değerinizi iletin:

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

Bu tek kod satırı benim için sorunu çözdü:

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