मेरे पास एक पृष्ठ है जो आइटम के माध्यम से मैपिंग कर रहा है और वहां जानकारी प्रदर्शित कर रहा है मेरे पास एक ड्रॉप डाउन है जो आइटम को संपादित करने और हटाने का विकल्प देता है। समस्या यह है कि जब मैं एक आइटम कार्ड पर ड्रॉप डाउन पर क्लिक करता हूं तो यह उन सभी वस्तुओं पर खुलता है जिन्हें मैं मैप कर रहा हूं, केवल उस आइटम के बजाय जिसे मैंने क्लिक किया था। आइटम isActive3 को सही पर सेट करके खुलता है

  optionsClicked = () => {
    this.setState({ isActive3: !this.state.isActive3 })
   };


 <div className="updateInfo">
    <div className="timenOptions"> 
      <div className="time">{moment(content.dateCreated).calendar()}</div>
      <div className= {this.state.isActive3 ? "optionsContainer active" : "optionsContainer"} onClick={this.optionsClicked} > 
        <div className="options"> ...</div>  
        <div className="optionsDropdown">
            <ul className="optionsList">
             <div className="edit"> Edit</div>
             <div className= "delete" onClick={this.removeItem}>Delete</div>
            </ul>
        </div>
       </div>     
    </div>
    <p>{content.content}</p>
</div>
0
jaydanasara 20 पद 2020, 03:56

1 उत्तर

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

आपके कोड के साथ समस्या - आपके state में वर्तमान में केवल एक ही संपत्ति isActive3 है जो सभी पंक्तियों के लिए सक्रिय स्थिति को नियंत्रित करती है।

समाधान - समाधान कुछ संपत्ति के बीच मानचित्रण करना है जो प्रत्येक पंक्ति के लिए अद्वितीय है और आपकी राज्य वस्तु में सक्रिय स्थिति है।

उदाहरण राज्य:

[
 {YourUniqueId : 1, isActive3: false},
 {YourUniqueId : 2, isActive3: true},
 {YourUniqueId : 3, isActive3: false}
]

आपका ऑनक्लिक कॉल तब बदल जाना चाहिए

() => this.optionsClicked(currentRowUniqueId)

तब आपके optionsClicked फ़ंक्शन को सभी आइटमों के माध्यम से लूप करना चाहिए और केवल वर्तमान आइटम के isActive3 को true पर सेट करना चाहिए और सभी isActive3 को false पर सेट करना चाहिए।

0
Sateesh Pagolu 20 पद 2020, 04:25
सभी वस्तुओं में एक आईडी है क्योंकि मैं उन्हें डेटा बेस से खींच रहा हूं लेकिन यह सभी वस्तुओं के माध्यम से लूप के लिए थोड़ा कठिन लगता है जो एक विशेष आइटम के लिए ड्रॉप डाउन को सक्रिय करने के लिए 1000 हो सकता है। मैं शायद एक रेफरी जोड़ने के बारे में सोच रहा था, फिर रेफरी को राज्य में रखा जा सकता है और उस विशेष वस्तु के लिए सक्रिय वर्ग को ट्रिगर किया जा सकता है और मैं isActive3 से छुटकारा पा सकता हूं?
 – 
jaydanasara
20 पद 2020, 04:40
हाँ, आप कर सकते थे। लेकिन आप अभी भी राज्य के माध्यम से लूपिंग करेंगे। अन्य विकल्प एक बाल घटक होना और बाल घटक के कार्य का आह्वान करना है। यह शायद एक overkill हो सकता है। मैंने उत्तर के रूप में जो पोस्ट किया है वह एक समाधान है जो काम करेगा और शायद इस परिदृश्य में सबसे अधिक समझ में आता है।
 – 
Sateesh Pagolu
20 पद 2020, 04:45