मेरे पास आईडी, शीर्षक, विवरण आदि जैसी विभिन्न विशेषताओं के साथ मेरे राज्य (कार्यक्षेत्र) में संग्रहीत वस्तुएं हैं। मैं उन्हें दृश्यमान बनाने के लिए एक तालिका में अपने रेंडर में मैप करता हूं। अब तक सब ठीक है। लेकिन जब मैं मानचित्र फ़ंक्शन के अंदर "ऑनक्लिक" विज्ञापन करने का प्रयास करता हूं, तो यह न केवल उस विशिष्ट तत्व के लिए ट्रिगर होगा जिस पर क्लिक किया गया था, बल्कि मानचित्र में सभी वर्कआइटम ऑब्जेक्ट भी ट्रिगर होंगे।

मेरे रेंडर में;

{workitem.company ? workitem.company + " - " : ""}

      <a href={workitem.url} target="_blank">{workitem.title}</a>
      <div className="description pt-2" onClick=  {this.descriptionPopOut(workitem.description)>  // My onclick function                            
           <strong>Description: </strong>                                         
           {workitem.description ? this.trimWord(workitem.description.replace("...", ""), 850, "...")
                                  : ""}{" "}
                                  ...
      </div>

ऑनक्लिक एक बहुत ही सरल कार्य की ओर ले जाएगा जिसमें एक अलर्ट होगा, और वस्तु विवरण को इनपुट के रूप में ले जाएगा।

descriptionPopOut = (description) => {
   alert(description); 
}

उपरोक्त सभी ऑब्जेक्ट विवरण संपत्ति के साथ अलर्ट को पॉप आउट कर देगा, न कि उस विशिष्ट तत्व के लिए जिसे क्लिक किया गया है। क्या इसका हल करने का कोई तरीका है?

0
Arte 28 अक्टूबर 2019, 10:39

2 जवाब

सबसे बढ़िया उत्तर

इसकी वजह यह है कि प्रत्येक रेंडर पर आपका फंक्शन कॉल कर रहा है यानी

this.descriptionPopOut(workitem.description)

. जब आप क्लिक करने पर कॉल करना चाहते हैं। आप या तो फ़ंक्शन को बाइंड कर सकते हैं ताकि बाद में क्लिक करने पर आप इसका उपयोग कर सकें:

this.descriptionPopOut.bind(this, workitem.description) 

या आप फ़ंक्शन को वापस करने के लिए वसा तीर फ़ंक्शन का उपयोग कर सकते हैं अर्थात

onClick = {() => this.descriptionPopOut(workitem.description)> 

(यह सुनिश्चित करता है कि यह फ़ंक्शन संदर्भ बनाता है और जब आप इसे क्लिक करते हैं, तो यह आपके फ़ंक्शन को विशिष्ट परम के साथ आमंत्रित करता है)

1
Shubham Verma 28 अक्टूबर 2019, 07:58

समस्या यह है कि आप अपने फ़ंक्शन को गलत तरीके से कॉल कर रहे हैं।

ऐसा मत करो onClick = {this.descriptionPopOut(workitem.description)>

चूंकि आप एक पैरामीटर पास करना चाहते हैं, ऐसा करें

onClick = {() => this.descriptionPopOut(workitem.description)>

1
Atin Singh 28 अक्टूबर 2019, 07:50