प्रतिक्रिया में घटना वस्तु से कस्टम विशेषताओं का उपयोग कैसे करें?

214

रिएक्ट 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-संपत्ति 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"]

इनमें से किसी ने भी काम नहीं किया।

javascript facebook reactjs

— andriy_sof
स्रोत

1

हो सकता है कि एक टिप्पणी किसी की मदद करे, मुझे पता चला कि रिएक्ट 16.7 डोंट रेंडरर्स और घटक के कस्टम एचटीएमएल विशेषताओं को अपडेट करता है यदि आपने उन्हें केवल स्टोर (फ़े रिडक्स) में बदल दिया और घटक से बंधा हुआ है। इसका मतलब है कि घटक में फ़ेयर है aria-modal=true, आप बदलावों को झूठा (असत्य) अरीया / डेटा विशेषताओं के स्टोर में धकेल देते हैं, लेकिन और कुछ नहीं बदला जाता है (जैसे कि घटक की सामग्री या कक्षा या वहाँ चर) परिणाम के रूप में ReactJs aria को अपडेट नहीं करेगा / डेटा घटकों में है। मुझे लगता है कि महसूस करने के लिए पूरे दिन के बारे में गड़बड़ कर रहा है।

— एलेक्सनिकोव

171

आपके द्वारा मांगे जाने से अलग तरीके से वांछित परिणाम प्राप्त करने में मदद करने के लिए:

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

ध्यान दें bind()। क्योंकि यह सब जावास्क्रिप्ट है, आप इस तरह से काम कर सकते हैं। हमें अब उन पर नज़र रखने के लिए DOM नोड्स में डेटा संलग्न करने की आवश्यकता नहीं है।

IMO यह DOM इवेंट्स पर भरोसा करने से ज्यादा साफ है।

अप्रैल 2017 को अपडेट करें: इन दिनों मैं onClick={() => this.removeTag(i)}इसके बजाय लिखूंगा.bind

— जारेड फोर्सिथ
स्रोत

17

लेकिन अब आपको इवेंट ऑब्जेक्ट पास नहीं मिलेगा।

— चॉवि

9

@chovy कृपया मुझे सही करें अगर मैं गलत हूं लेकिन सभी जावास्क्रिप्ट फ़ंक्शंस स्वाभाविक नहीं हैं? मैंने इसका परीक्षण नहीं किया है, लेकिन मुझे लगता है कि "ईवेंट ऑब्जेक्ट" अभी भी पारित किया जा रहा है। यह सिर्फ उसी पैरामीटर इंडेक्स पर नहीं है जो पहले था। फैशन में ऊपर उल्लिखित के रूप में बंधन unshiftसमारोह तर्कों सरणी की तरह है। यदि "ईवेंट ऑब्जेक्ट" इंडेक्स पर था, 0तो यह अब इंडेक्स पर होगा 1।

— राइडर ब्रूक्स

8

@chovy यदि आपको इसकी आवश्यकता है तो आप कर सकते हैं। बस करोremoveTag: function(i, evt) {

— जारेड फोर्सिथ

8

यह क्लीनर है, लेकिन यदि आप उनमें से बहुत कुछ कर रहे हैं तो उन सभी बाइंडों में एक प्रदर्शन हिट होता है।

— एल योबो

6

github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…

— जॉर्डन

296

event.targetआपको मूल डोम नोड देता है, फिर आपको विशेषताओं तक पहुंचने के लिए नियमित DOM APIs का उपयोग करने की आवश्यकता होती है। यह कैसे करना है पर डॉक्स हैं: डेटा विशेषताओं का उपयोग करना ।

आप event.target.dataset.tagया तो कर सकते हैं या event.target.getAttribute('data-tag'); या तो एक काम करता है।

— सोफी अल्परट
स्रोत

24

0.13.3 प्रतिक्रिया करें, IE10 event.target.datasetअपरिभाषित है लेकिन event.target.getAttribute('data-tag')काम करता है। अन्य ब्राउज़र ठीक हैं। धन्यवाद

— एंड्री बोरिसको

क्या इस दृष्टिकोण में कुछ गड़बड़ है? उदाहरण के लिए, उपयोगकर्ता किस बटन पर निर्भर करता है, मैं एक फ़ंक्शन को स्ट्रिंग पास करना चाहता हूं। मैं प्रत्येक मामले के लिए अपने घटक में तीन कार्य करने से बचने की उम्मीद कर रहा था।

— माइकल जे। कैलकिंस

4

यह उत्तर प्रदर्शन के मामले में स्वीकृत एक से बेहतर है। इस तरह से करने का मतलब है कि हम हर रेंडर पर एक नया फंक्शन नहीं बनाते हैं। न केवल यह प्रत्येक रेंडर को एक नया फ़ंक्शन बनाना छोड़ता है, लेकिन चूंकि फ़ंक्शन संदर्भ प्रत्येक बार समान होगा, इसलिए शुद्ध (या मेमोइज़्ड) घटक इसे एक अलग फ़ंक्शन के रूप में नहीं देखेंगे। इसलिए, यह अनावश्यक रूप से हर बार पूरे घटक को फिर से प्रस्तुत नहीं करेगा। यहां तक कि एक कस्टम कार्यान्वयन का shouldComponentUpdateभी यही मुद्दा होगा जब तक कि आपने फ़ंक्शन प्रोप को पूरी तरह से अनदेखा नहीं किया है।

— माइकल यॉर्स्की

पूरी तरह से ठीक काम करता है

— Ogbonna Vitalis

1

मैं टाइपस्क्रिप्ट का उपयोग करता हूं। मेरे मामले में मुझे इस्तेमाल करना थाevent.currentTarget.getAttibute('data-tag')

— karianpour

50

यहाँ सबसे अच्छा तरीका है जो मैंने पाया:

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

उन विशेषताओं को "NamedNodeMap" में संग्रहीत किया जाता है, जिन्हें आप getNamedItem विधि से आसानी से एक्सेस कर सकते हैं।

— roctimo
स्रोत

4

आप शायद .valueवास्तविक मूल्य प्राप्त करने के लिए एक जोड़ना चाहते हैं

— विकीनी सिप

मैंने जवाब जोड़ने के .valueलिए अंत में एडिट किया है जैसा कि @ikunia ने सुझाव दिया है

— fguillen

25

या आप एक बंद का उपयोग कर सकते हैं:

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 
}

— ट्यूडर कैंपियन
स्रोत

3

धन्यवाद, ट्यूडर। आपके समाधान की कोशिश की और यह w / o बाध्यकारी भी काम करता है। मैंने इसे ई टारगेट पर स्टाइल टॉगल करने के लिए इस्तेमाल किया।

— andyy_sof

आप कैसे जानते हैं कि एक आंतरिक फ़ंक्शन में इवेंट args होगा?

— jack.the.ripper

20

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

— Mentori
स्रोत

1

अन्य कोड को समझने के लिए अपने कोड में कुछ विवरण जोड़ें

— अनिरुद्ध दास

8

रिएक्ट 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}); 
}

— tytk
स्रोत

1

'I ’कहाँ से आता है?

— फ्रेशचाइर

2

iकस्टम विशेषता है कि ओपी किसी भी तरह से गुजरना चाहता था। जब aतत्व परिभाषित किया जाता है तो यह कुछ परिवर्तनशील होता है।

— 19

ओपी चाहती ही नहीं है। वे onClick हैंडलर के साथ तत्व (ए) पर एक विशेषता मान का उपयोग करना चाहते हैं।

— एड्रियन

1

मेरा कहना यह था कि आधिकारिक समाधान तत्व पर एक डेटा विशेषता को सेट करने के बजाय, कार्य-क्षेत्र के फ़ंक्शन को कार्यक्षेत्र में चर के साथ परिभाषित करना है। यदि आप वास्तव में चाहते हैं, तो यह आपको तत्वों की विशेषताओं तक पहुंचने से नहीं रोकता है, लेकिन यह रिएक्ट में एक चर का उपयोग करने का मुहावरेदार तरीका नहीं है।

— 19

8

<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मेरे लिए काम करता है

— मणींद्र गौतम
स्रोत

5

आप डेटा विशेषताओं को इस तरह से एक्सेस कर सकते हैं

event.target.dataset.tag

— रमीज इकबाल
स्रोत

4

कोड की इस एकल पंक्ति ने मेरे लिए समस्या हल कर दी:

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

— एमेका ऑगस्टीन
स्रोत

3

मैं रिएक्ट के बारे में नहीं जानता, लेकिन सामान्य स्थिति में आप इस तरह से कस्टम विशेषताएँ पास कर सकते हैं:

1) HTML- टैग के अंदर डेटा-प्रीफिक्स के साथ एक नई विशेषता को परिभाषित करें

data-mydatafield = "asdasdasdaad"

2) के साथ जावास्क्रिप्ट से प्राप्त करें

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

— jimver04
स्रोत

मेरा कहना है कि अशक्त रहो

— Si8

3

यदि कोई भी React में Event.target का उपयोग करने का प्रयास कर रहा है और एक अशक्त मान पा रहा है, तो ऐसा इसलिए है क्योंकि SyntheticEvent ने event.target को बदल दिया है। SyntheticEvent अब 'currentTarget' रखती है, जैसे कि event.currentTarget.getAttribute ('data-username')।

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

ऐसा लगता है कि रिएक्ट ऐसा करता है ताकि यह अधिक ब्राउज़रों में काम करे। आप एक पुराने गुण के माध्यम से पुराने गुणों तक पहुँच सकते हैं।

— एडुआर्डो
स्रोत

3

डोम गुण (जो धीमा है) को असाइन करने के बजाय केवल मान को कार्य करने के लिए एक पैरामीटर के रूप में पारित करें जो वास्तव में आपके हैंडलर का निर्माण करता है:

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

— msangel
स्रोत

एक महान टिप्पणी की तरह लग रहा है! मैं यह कैसे देख सकता हूँ कि यह बहुत अधिक धीमी गति से डोम गुण प्रदान कर रहा है

— बर्ड बाइलेर

2

आप बस event.target.dataset ऑब्जेक्ट का उपयोग कर सकते हैं । यह आपको सभी डेटा विशेषताओं के साथ ऑब्जेक्ट देगा।

— विकाश कुमार
स्रोत

0

प्रतिक्रिया में आपको html डेटा की आवश्यकता नहीं है, एक फ़ंक्शन का उपयोग दूसरे फ़ंक्शन को वापस करने के लिए करें; इस तरह यह बहुत ही सरल भेजना कस्टम परमिशन है और आप कस्टम डेटा और ईवेंट पर आरोप लगा सकते हैं।

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

— मिगुएल सविग्नानो
स्रोत