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

import React, { useState } from "react";
import "../../styles/styles.scss";
import InfoIcon from "../../images/icons/info.svg";
import InfoBox from "../info/InfoBox";

const Step = ({ title, description }) => {
    const [show, setShow] = useState(false);

    const openInfo = () => {
        setShow(true);
    };

    const closeInfo = () => {
        setShow(false);
    };

    return (
        <>
            <li>
                <div className="list-item" onClick={openInfo}>
                    <div className="list-item-content">
                        <h3>{title}</h3>
                        <InfoIcon className="info-icon" />
                    </div>
                </div>
            </li>

            {show && (
                <InfoBox
                    title={title}
                    description={description}
                    closeInfo={closeInfo}
                />
            )}
        </>
    );
};

export default Step;
0
istoby 13 सितंबर 2020, 11:53

1 उत्तर

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

आप ऐसा कर सकते हैं:

  • const [show, setShow] = useState(false); को पैरेंट कंपोनेंट में ले जाएं।
  • boolean के बजाय आप title infoBox को स्टोर कर सकते हैं, इसे null में इनिशियलाइज़ कर सकते हैं। [openedInfo, setOpenedInfo] = useState(null);
  • Step घटक में 2 अन्य प्रॉप्स होंगे: setOpenedInfo और openedInfo
  • openInfo const openInfo = () => setOpenedInfo(title) होगा
  • closeInfo const closeInfo = () => setOpenedInfo(null) होगा
  • आप infoBox अगर openedStep === title दिखाएंगे

इस तरह आपके पास हमेशा एक ही जानकारी बॉक्स खुला रहेगा।

मैं मान रहा हूँ कि title एक string है और अद्वितीय है। आप title को Step घटक से संबंधित किसी अन्य (अद्वितीय) मान से प्रतिस्थापित कर सकते हैं।

    import React, { useState } from "react";
    import "../../styles/styles.scss";
    import InfoIcon from "../../images/icons/info.svg";
    import InfoBox from "../info/InfoBox";
    
    const ParentComponent = () => {
    [openedInfo, setOpenedInfo] = useState(null);
    return data.map(({title,description})=><Step title={title} description={description} setOpenedInfo={setOpenedInfo} openedInfo={openedInfo}/>)
    }

    const Step = ({ title, description, setOpenedInfo, openedInfo }) => {
    
        const openInfo = () => {
            setOpenedInfo(title); //better use an id if available
        };
    
        const closeInfo = () => {
            setOpenedInfo(null);
        };
    
        return (
            <>
                <li>
                    <div className="list-item" onClick={openInfo}>
                        <div className="list-item-content">
                            <h3>{title}</h3>
                            <InfoIcon className="info-icon" />
                        </div>
                    </div>
                </li>
    
                {openedInfo === title && (
                    <InfoBox
                        title={title}
                        description={description}
                        closeInfo={closeInfo}
                    />
                )}
            </>
        );
    };
    
    export default Step;
1
Fdr 19 सितंबर 2020, 15:58