จะเข้าถึงแอตทริบิวต์ที่กำหนดเองจากวัตถุเหตุการณ์ใน React ได้อย่างไร

React สามารถแสดงแอตทริบิวต์ที่กำหนดเองได้ตามที่อธิบายไว้ที่ http://facebook.github.io/react/docs/jsx-gotchas.html :

หากคุณต้องการใช้แอตทริบิวต์ที่กำหนดเองคุณควรใส่คำเสริมหน้าด้วย data-

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

และนั่นเป็นข่าวที่ดียกเว้นฉันไม่สามารถหาวิธีเข้าถึงได้จากวัตถุเหตุการณ์เช่น:

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

องค์ประกอบและdata-คุณสมบัติการแสดงผลในรูปแบบ html ปรับ คุณสมบัติมาตรฐานเช่นstyleสามารถเข้าถึงได้event.target.styleดี แทนที่จะevent.targetลอง:

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

ไม่สามารถใช้งานได้

เพื่อช่วยให้คุณได้รับผลลัพธ์ที่ต้องการในวิธีที่แตกต่างจากที่คุณถาม:

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

bind()แจ้งให้ทราบล่วงหน้า เพราะนี่คือจาวาสคริปต์ทั้งหมดคุณจึงสามารถทำสิ่งที่มีประโยชน์เช่นนั้นได้ เราไม่จำเป็นต้องแนบข้อมูลไปยังโหนด DOM เพื่อติดตามพวกเขาอีกต่อไป

IMO นี้สะอาดกว่าการใช้กิจกรรม DOM

อัปเดตเมษายน 2560:วันนี้ฉันจะเขียนonClick={() => this.removeTag(i)}แทน.bind

event.targetให้โหนด DOM ดั้งเดิมแก่คุณจากนั้นคุณต้องใช้ DOM API ปกติเพื่อเข้าถึงแอตทริบิวต์ นี่คือเอกสารเกี่ยวกับวิธีการทำเช่นนั้น: การใช้แอตทริบิวต์ dataการใช้แอตทริบิวต์ข้อมูล

คุณสามารถทำอย่างใดอย่างหนึ่งevent.target.dataset.tagหรือevent.target.getAttribute('data-tag'); ใช้ได้ทั้งงาน

นี่คือวิธีที่ดีที่สุดที่ฉันพบ:

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

คุณลักษณะเหล่านั้นจะถูกเก็บไว้ใน "NamedNodeMap" ซึ่งคุณสามารถเข้าถึงได้อย่างง่ายดายด้วยเมธอด getNamedItem

หรือคุณสามารถใช้การปิด:

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) นี่คือวิธีแก้ปัญหาอย่างเป็นทางการ: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

TLDR: OP ควรทำ:

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>

เพื่อให้e.currentTarget.attributes['tag'].valueการทำงานสำหรับฉัน

คุณสามารถเข้าถึงแอตทริบิวต์ข้อมูลบางอย่างเช่นนี้

event.target.dataset.tag

รหัสบรรทัดเดียวนี้แก้ไขปัญหาให้ฉัน:

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

ฉันไม่รู้เกี่ยวกับ React แต่ในกรณีทั่วไปคุณสามารถส่งแอตทริบิวต์ที่กำหนดเองดังนี้:

1) กำหนดภายใน html- แท็กแอตทริบิวต์ใหม่ด้วย data- คำนำหน้า

data-mydatafield = "asdasdasdaad"

2) รับจาก javascript ด้วย

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

หากใครพยายามใช้ event.target ใน React และค้นหาค่า Null นั่นเป็นเพราะ SyntheticEvent ได้แทนที่ event.target ตอนนี้ SyntheticEvent จะเก็บ 'currentTarget' เช่นใน event.currentTarget.getAttribute ('data-username')

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

ดูเหมือนว่า React จะทำเช่นนี้เพื่อให้สามารถทำงานกับเบราว์เซอร์อื่น ๆ คุณสามารถเข้าถึงคุณสมบัติเก่าผ่านแอตทริบิวต์ nativeEvent

ลองแทนที่จะกำหนดคุณสมบัติ dom (ซึ่งช้า) เพียงแค่ส่งค่าของคุณเป็นพารามิเตอร์เพื่อทำงานที่สร้างตัวจัดการของคุณจริง:

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

คุณสามารถใช้วัตถุevent.target.dataset สิ่งนี้จะให้วัตถุกับแอตทริบิวต์ข้อมูลทั้งหมด

ในการตอบสนองคุณไม่ต้องการข้อมูล html ให้ใช้ฟังก์ชันส่งคืนฟังก์ชันอื่น เช่นนี้มันง่ายมากที่จะส่งพารามิเตอร์ที่กำหนดเองและคุณสามารถเข้าถึงข้อมูลที่กำหนดเองและเหตุการณ์

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