Bagaimana cara mengakses atribut khusus dari objek acara di Bereaksi?

Bereaksi mampu membuat atribut khusus seperti yang dijelaskan di http://facebook.github.io/react/docs/jsx-gotchas.html :

Jika Anda ingin menggunakan atribut khusus, Anda harus awalan dengan data-.

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

Dan itu berita bagus kecuali saya tidak dapat menemukan cara untuk mengaksesnya dari objek acara misalnya:

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

Elemen dan data-properti membuat html baik-baik saja. Properti standar seperti styledapat diakses dengan event.target.stylebaik. Alih-alih event.targetsaya mencoba:

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

tidak ada yang berhasil.

Untuk membantu Anda mendapatkan hasil yang diinginkan dengan cara yang mungkin berbeda dari yang Anda tanyakan:

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

Perhatikan bind() . Karena ini semua javascript, Anda dapat melakukan hal-hal praktis seperti itu. Kami tidak perlu lagi melampirkan data ke node DOM untuk melacaknya.

IMO ini jauh lebih bersih daripada mengandalkan acara DOM.

Perbarui April 2017: Hari-hari ini saya akan menulis onClick={() => this.removeTag(i)}sebagai ganti.bind

event.targetmemberi Anda simpul DOM asli, maka Anda perlu menggunakan DOM API biasa untuk mengakses atribut. Berikut adalah dokumen tentang cara melakukannya: Menggunakan atribut data .

Anda dapat melakukan salah satu event.target.dataset.tagatau event.target.getAttribute('data-tag'); salah satu yang berfungsi.

Inilah cara terbaik yang saya temukan:

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

Atribut tersebut disimpan dalam "NamedNodeMap", yang dapat Anda akses dengan mudah dengan metode getNamedItem.

Atau Anda dapat menggunakan penutupan:

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>

Pada React v16.1.1 (2017), berikut adalah solusi resmi: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP harus melakukan:

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>

jadi e.currentTarget.attributes['tag'].valuebekerja untuk saya

Anda dapat mengakses atribut data seperti ini

event.target.dataset.tag

Baris kode tunggal ini memecahkan masalah bagi saya:

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

Saya tidak tahu tentang Bereaksi, tetapi dalam kasus umum Anda dapat memberikan atribut khusus seperti ini:

1) mendefinisikan di dalam html-tag atribut baru dengan awalan data

data-mydatafield = "asdasdasdaad"

2) dapatkan dari javascript dengan

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

Jika ada yang mencoba menggunakan event.target di Bereaksi dan menemukan nilai nol, itu karena SyntheticEvent telah menggantikan event.target. SyntheticEvent sekarang memiliki 'currentTarget', seperti di event.currentTarget.getAttribute ('data-username').

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

Sepertinya React melakukan ini sehingga berfungsi di lebih banyak browser. Anda dapat mengakses properti lama melalui atribut nativeEvent.

Coba alih-alih menetapkan properti dom (yang lambat) cukup berikan nilai Anda sebagai parameter untuk berfungsi yang sebenarnya membuat penangan Anda:

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

Anda cukup menggunakan objek event.target.dataset . Ini akan memberi Anda objek dengan semua atribut data.

Di Bereaksi Anda tidak memerlukan data html, gunakan fungsi untuk mengembalikan fungsi lainnya; seperti ini, sangat sederhana kirim params khusus dan Anda dapat mengakses data khusus dan acara.

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