मेरे पास ऑनक्लिक फ़ंक्शन को कॉल करने वाले divs की केवल एक सूची का एक पृष्ठ है। यह काफी...

<div
            className="square card-container bg-primary"
            points="200"
            id="2"
            onClick={e => select(200, "cat1", e.target.id)}
          >
            <h3 className="text-light">200</h3>
          </div> 

उनमें से सिर्फ 30। अनुक्रमिक आईडी के साथ। क्लिक करने पर आईडी को एक नई सरणी में धकेलना या क्लिक करने के बाद क्लासनाम जोड़ना काफी आसान है, और जब मैं डीबगर में कोड के माध्यम से कदम उठाता हूं तो मैं देख सकता हूं कि कक्षा जोड़ा गया है और शैलियों में बदलाव आया है, लेकिन यह तुरंत है पिछले "अन-क्लिक" क्लासनाम पर वापस सेट करें। मैं सोच रहा था कि यह इनमें से प्रत्येक div को अपने स्वयं के घटक बनाने के लिए काम कर सकता है और उपयोग स्टेट का उपयोग करने के लिए काम कर सकता है, लेकिन चूंकि वे सभी अधिकतर समान हैं, मुझे अभी भी एक कुंजी या आईडी की आवश्यकता होगी, इसलिए मुझे यकीन नहीं है कि मैं इसे कैसे पास करूंगा एक राज्य के लिए और सशर्त रूप से उपयोग करें? मुझे खेद है अगर इसका कोई मतलब नहीं है। मूल रूप से मैं केवल एक बार किसी आइटम का चयन करने के बाद शैलियों को थोड़ा बदलना चाहता हूं, बिना प्रारंभिक वर्गनाम पर वापस जाने के जब इसे फिर से प्रस्तुत किया जाता है। यह वह स्क्रिप्ट है जिसे ऑनक्लिक कहा जाता है।

const selected = []
  const change = id => {

    selected.push(id);
    console.log(selected);
  };

  const select = (points, cat, id) => {
    let newArr = questions.filter(
      q => q.category === "Sample 1" && q.points === points
    );
    change(id);
    if (newArr.length > 1) {
      let randomOutput = Math.floor(Math.random() * newArr.length);
      console.log(newArr[randomOutput]);
      let out = newArr[randomOutput];
      props.setQuestion({ out });
      props.detail();
      return out;
    } else {
      let out = newArr;
      props.setQuestion({ out });
      props.detail();
      console.log(points, cat);
    }
  }
0
Tyler Durden 15 जिंदा 2020, 21:12

1 उत्तर

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

आपको राज्य का उपयोग करके चयनित वस्तुओं की एक सूची संग्रहीत करने और className को गतिशील बनाने की आवश्यकता है

उदाहरण: https://jsfiddle.net/78bsnhgw/

0
Gennady Dogaev 15 जिंदा 2020, 18:39