मेरे पास एक प्रतिक्रिया घटक वाला एक पृष्ठ है जो एकाधिक विवरण/सारांश टैग का उपयोग करता है:

const React = require("react");

class samplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return (

        <div>
            <details>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick="OpenAll()">Open All Details.</button>
            <button onClick="CloseAll()">Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;

मेरी स्क्रिप्ट को कॉन्फ़िगर करने के लिए मेरे पास एक वैश्विक siteConfig.js है:

scripts: [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
],

उपरोक्त विवरण टैग से "खुला" विशेषता जोड़ने या निकालने के लिए 2 कार्यों के साथ:

function CloseAll() {
  $("details").removeAttr("open");
}

function OpenAll() {
    $("details").attr("open", "open");
}

मुझे पता है कि मेरी मुख्य स्क्रिप्ट फ़ाइल में 2 फ़ंक्शन siteConfig.js के माध्यम से आयात किए जाते हैं, क्योंकि मेरे अन्य फ़ंक्शन बिना किसी समस्या के काम कर रहे हैं। जैसा कि नमूना पृष्ठ से देखा जा सकता है, बटन टैग जो OpenAll / CloseAll फ़ंक्शन शुरू करते हैं, अन्य विवरण टैग के साथ div के भीतर स्थित होते हैं।

मैंने सोचा कि मेरी विधि अच्छी थी, लेकिन कोई भी बटन इच्छित प्रभाव उत्पन्न नहीं करता है। मुझे संदेह है कि इसका फ़ंक्शन स्कोप या मेरे वर्तमान सेट-अप के बारे में कुछ है (मैं डॉक्यूसॉरस का उपयोग कर रहा हूं, जो कि "रिएक्ट ऐप बनाएं" के समान है)। मुझे नहीं लगता कि मैंने इस तरह के प्रोजेक्ट के लिए कुछ भी असाधारण किया है। किसी भी प्रतिक्रिया की सराहना करें।

0
Lichtung 27 अक्टूबर 2019, 14:39

1 उत्तर

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

विशेषता को true या false पर सेट करने के लिए स्थिति का उपयोग करें, जैसे। (ध्यान दें कि आप यहां जैसे हुक का उपयोग कर सकते हैं, लेकिन अच्छे पुराने state और setState। साथ ही आपको siteConfig या वहां परिभाषित दो कार्यों की आवश्यकता नहीं है।

const React = require("react");

const samplePage = () => {
    const [isOpen, setIsOpen] = React.useState(false); 

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick={() => setIsOpen(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;
2
Lichtung 28 अक्टूबर 2019, 11:49