[javascript] كيفية الوصول إلى السمات المخصصة من كائن الحدث في React؟



Answers

يمنحك event.target عقدة DOM الأصلية ، ثم تحتاج إلى استخدام DOM APIs العادية للوصول إلى السمات. فيما يلي مستندات حول كيفية القيام بذلك:

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

يمكنك القيام بـ event.target.dataset.tag أو event.target.getAttribute('data-tag') ؛ إما واحد يعمل.

Question

رد الفعل قادر على تقديم سمات مخصصة كما هو موضح في 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- والبيانات 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"]

لا شيء من هذه عملت.







إذا كان أي شخص يحاول استخدام event.target في React والعثور على قيمة فارغة ، فذلك لأن SyntheticEvent قد حل محل event.target. يحمل SyntheticEvent الآن "currentTarget" ، كما هو الحال في event.currentTarget.getAttribute ('اسم المستخدم للبيانات').

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

يبدو أن React يعمل هذا بحيث يعمل عبر المزيد من المتصفحات. يمكنك الوصول إلى الخصائص القديمة من خلال سمة nativeEvent.




أو يمكنك استخدام إغلاق:

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 
}



هذا يعمل أيضا:

var attribute = $ (event.target.attributes ['data-tag']). val ()؛




Links