विशिष्ट घटक बटनों में सीएसएस शैलियों को जोड़ना संभव है?

Question

मैं सीएसएस बॉक्स-छाया के माध्यम से एक सफेद रूपरेखा जोड़ने की कोशिश कर रहा हूं, लेकिन जब भी मैं किसी भी बटन पर क्लिक करता हूं, तो उन सभी को मेरे द्वारा क्लिक किए गए वास्तविक बटन की बजाय रूपरेखा मिलती है।

क्या कोई ऐसा तरीका है जिससे केवल बटन घटक जिस पर मैं क्लिक करता हूं वह रूपरेखा प्राप्त करता है और यदि मैं इसे फिर से क्लिक करता हूं तो टॉगल बंद हो जाता है?

यहाँ मेरा वर्तमान कोड है:

const [selectState, setSelectState] = useState(false);

const Button = ({ selected, text }) => {
  function handleClick() {
    setSelectState(true);
  }

  return (
    <span
      onClick={handleClick}
      className={`btn-style ${selected ? "selected" : ""}`}
    >
      {text}
    </span>
  );
};

export default function Hello() {
  return (
    <Button selected={selectState} text='Blue'/>
    <Button selected={selectState} text='Red'/>
    <Button selected={selectState} text='Green'/>
  );
}

.चयनित सीएसएस:

.selected {
  box-shadow: rgb(17 206 101) 0px 0px 0px 2px inset !important;
}

reactjs

0

StackUnderFlow 27 सितंबर 2020, 07:17

Answer 1

यदि आप अलग-अलग तत्वों की चयनित स्थिति को ट्रैक करना चाहते हैं, तो आपको ऑनक्लिक विधि को संभालना होगा और मूल तत्व में संबंधित स्थिति परिवर्तन करना होगा।

const Button = ({ selected, text, onClick }) => {
  return (
    <span
      onClick={onClick}
      className={`btn-style ${selected ? "selected" : ""}`}
    >
      {text}
    </span>
  );
};

export default function Hello() {
  const [selectState, setSelectState] = React.useState(0);
  return (
    <React.Fragment>
      <Button
        onClick={() => setSelectState(1)}
        selected={selectState === 1}
        text="Blue"
      />
      <Button
        onClick={() => setSelectState(2)}
        selected={selectState === 2}
        text="Red"
      />
      <Button
        onClick={() => setSelectState(3)}
        selected={selectState === 3}
        text="Green"
      />
    </React.Fragment>
  );
}

0

Manish 27 सितंबर 2020, 07:27

Answer 2

आप क्लिक हैंडलर राज्य में क्लिक किए गए बटन इंडेक्स को सहेजने के लिए मूल घटक को बता सकते हैं, और यह निर्धारित करने के लिए कि selected वर्ग की आवश्यकता है या नहीं, उस स्थिति को पास कर सकते हैं:

const Button = ({ selected, text, onClick }) => {

    return (
        <span
            onClick={onClick}
            className={`btn-style ${selected ? "selected" : ""}`}
        >
            {text}
        </span>
    );
};

export default function Hello({ texts }) {
    const [selectedIndex, setSelectedIndex] = useState(-1);
    return (<>
        {
            texts.map((text, i) => <Button selected={i === selectedIndex} text={text} onClick={() => setSelectedIndex(i)}} />)
        }
    </>);
}
ReactDOM.render(<Hello texts={['Blue', 'Red', 'Green']} />, document.querySelector('.react'));

0

CertainPerformance 27 सितंबर 2020, 07:24

विशिष्ट घटक बटनों में सीएसएस शैलियों को जोड़ना संभव है?

2 जवाब

संबंधित सवाल

नए सवाल

reactjs