React'taki olay nesnesinden özel özelliklere nasıl erişilir?

React, http://facebook.github.io/react/docs/jsx-gotchas.html adresinde açıklandığı gibi özel özellikler oluşturabilir :

Özel bir öznitelik kullanmak istiyorsanız, veri- önüne önek eklemeniz gerekir.

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

Ve bu olay olay nesnesinden erişmek için bir yol bulamıyorum dışında harika bir haber:

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

Öğe ve data-özellik html ince biçiminde oluşturulur. Gibi standart özelliklere iyi styleerişilebilir event.target.style. Bunun yerine event.targetdenedim:

 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ı.

İstenen sonucu belki de istediğinizden farklı bir şekilde elde etmenize 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
},

Dikkat edin bind(). Hepsi bu javascript olduğundan, böyle kullanışlı şeyler yapabilirsiniz. Bunları takip etmek için artık DOM düğümlerine veri eklememiz gerekmiyor.

IMO bu DOM olaylarına güvenmekten çok daha temiz.

Nisan 2017'yi güncelleyin: Bugünlerde onClick={() => this.removeTag(i)}bunun yerine yazarım.bind

event.targetsize yerel DOM düğümünü verirse, özelliklere erişmek için normal DOM API'larını kullanmanız gerekir. İşte bununla ilgili dokümanlar: Veri özniteliklerini kullanma .

İkisinden birini event.target.dataset.tagveya event.target.getAttribute('data-tag'); biri çalışır.

İşte bulduğum en iyi yol:

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

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

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

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

React v16.1.1 (2017) itibarıyla resmi çözüm şöyledir: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP şunları yapmalıdır:

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>

böylece e.currentTarget.attributes['tag'].valuebenim için çalışıyor

Veri özelliklerine böyle bir şeye erişebilirsiniz

event.target.dataset.tag

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

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

React hakkında bilmiyorum, ancak genel durumda böyle özel nitelikleri iletebilirsiniz:

1) HTML etiketi içinde veri öneki olan yeni bir özellik tanımlayın

data-mydatafield = "asdasdasdaad"

2) ile javascript almak

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

Herkes React içinde event.target kullanmaya ve bir null değer bulmaya çalışıyorsa, bunun nedeni bir SyntheticEvent öğesinin event.target'ın yerini almasıdır. SyntheticEvent artık event.currentTarget.getAttribute ('data-username') gibi 'currentTarget' öğesini barındırıyor.

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

React bunu daha çok tarayıcıda çalışacak şekilde yapıyor gibi görünüyor. Bir nativeEvent özniteliği aracılığıyla eski özelliklere erişebilirsiniz.

Dom özelliklerini (yavaş olan) atamak yerine, değerinizi işleyicinizi oluşturan işleve bir parametre olarak iletmeniz yeterlidir:

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

Event.target.dataset nesnesini kullanabilirsiniz . Bu size tüm veri özniteliklerine sahip nesneyi verecektir.

React'te html verilerine ihtiyacınız yoktur, başka bir işlev döndüren bir işlev kullanın; Bunun gibi özel parametreler göndermek çok basit ve özel veri ve olay erişebilirsiniz.

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