जब एक बटन क्लिक किया जाता है तो मैं एक तत्व की स्टाइल बदलना चाहता हूं, लेकिन मैं यह नहीं समझ सकता कि सरणी में सभी तत्वों की शैलियों को बदले बिना ऐसा कैसे किया जाए जिसे क्लिक नहीं किया गया है।

        <div >
            {props.stuff.map(item => 
                <li className={itemClass}>
                    <div>{item}</div>
                    <button onClick={...change the style of the <li> without effecting the others}>Done</button>
                </li>)}
        </div>

मुझे लगता है कि मुझे प्रत्येक ली को एक अद्वितीय आईडी देने और उस आईडी को मेरे क्लिक हैंडलर फ़ंक्शन में एक्सेस करने की आवश्यकता है और उस आईडी के साथ केवल ली पर एक और सीएसएस क्लास लागू करें ... सिवाय इसके कि मैं यह नहीं समझ सकता कि यह कैसे करें। या मैं गलत दिशा में जा रहा हूँ। किन्हीं भी सुझावों को स्वीकार किया जाएगा!

2
b c 8 जुलाई 2021, 01:29

1 उत्तर

सुनिश्चित नहीं है कि यह "सबसे अच्छा तरीका" है क्योंकि मैं स्वयं एक फ्रंट-एंड डेवलपर नहीं हूं, लेकिन आप li को एक अलग घटक के रूप में बना सकते हैं, फिर रिएक्ट के useState हुक उदाहरण के लिए:

/* your file */
<div>
  {props.stuff.map(item => <MagicLi>{item}</MagicLi>)}
</div>
/* separated component file */
import React, { useState } from 'react';

function MagicLi(props) {
  
  const [color, setColor] = useState('li-orange');

  const changeColor = function() {
    if (color === 'li-orange') setColor('li-green');
    else setColor('li-orange');
  };

  return (
    <li className={color}>
      <div>{props.children}</div>
      <button onClick={changeColor}>Done</button>
    </li>
  );
}

export default MagicLi;
/* add to your css file the styling you want */
.li-orange {
  color: orange;
}

.li-green {
  color: green;
}
0
Gabriel Andrade 7 जुलाई 2021, 23:15