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


Answers

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

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 :

إذا كنت ترغب في استخدام سمة مخصصة، يجب أن بادئة مع البيانات.

<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- الملكية تقديم في هتمل غرامة. يمكن الوصول إلى خصائص قياسية مثل 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"]

أي من هذه عملت.




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






في رد فعل لا تحتاج إلى بيانات أتش تي أم أل، واستخدام وظيفة إرجاع وظيفة أخرى. مثل هذا انها بسيطة جدا إرسال المعلمات المخصصة ويمكنك الوصول إلى البيانات المخصصة والحدث.

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



إليك أفضل طريقة عثرت عليها:

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

يتم تخزين تلك الصفات في "نامدنوديماب"، والتي يمكنك الوصول بسهولة مع الأسلوب جيتنامديتم.