राज्य वह स्थान है जहां से डेटा आता है। हमें हमेशा अपने राज्य को यथासंभव सरल बनाने का प्रयास करना चाहिए और स्टेटफुल घटकों की संख्या को कम से कम करना चाहिए। उदाहरण के लिए, यदि हमारे पास दस घटक हैं जिन्हें राज्य से डेटा की आवश्यकता है, तो हमें एक कंटेनर घटक बनाना चाहिए जो उन सभी के लिए राज्य को बनाए रखेगा।
उदाहरण 1
जब उपयोगकर्ता बटन दबाता है तो बटन शीर्षक चालू/बंद हो जाता है।
कंस्ट्रक्टर के अंदर राज्य को इनिशियलाइज़ किया जाता है जैसा कि नीचे दिखाया गया है -
कंस्ट्रक्टर (प्रॉप्स) {सुपर (प्रॉप्स); this.state ={ isToggle:true };} isToggle राज्य को दिया गया बूलियन मान है। बटन का शीर्षक isToggle प्रॉपर्टी के आधार पर तय किया जाता है। यदि मान सत्य है, तो बटन का शीर्षक चालू है अन्यथा बंद है।
जब बटन दबाया जाता है तो ऑनप्रेस विधि को कॉल किया जाता है जो सेटस्टेट को कॉल करता है जो नीचे दिखाए गए अनुसार टॉगल मान को अपडेट करता है -
onPress={() => { this.setState({isToggle:!this.state.isToggle});}} जब उपयोगकर्ता बटन पर क्लिक करता है तो ऑनप्रेस ईवेंट को कॉल किया जाएगा और सेटस्टेट isToggle संपत्ति की स्थिति को बदल देगा।
App.js
<पूर्व>आयात प्रतिक्रिया, {घटक} "प्रतिक्रिया" से; आयात {पाठ, दृश्य, बटन, चेतावनी} 'प्रतिक्रिया-मूल' से; वर्ग ऐप घटक {कन्स्ट्रक्टर (प्रॉप्स) {सुपर (प्रॉप्स) का विस्तार करता है; this.state ={ isToggle:true }; } रेंडर (प्रॉप्स) {रिटर्न (<व्यू स्टाइल ={{फ्लेक्स:1, जस्टिफाई कंटेंट:'सेंटर', मार्जिन:15}}> State.isToggle }); }} title={ this.state.isToggle ? 'ON' :"OFF" } color="green" /> ); }}डिफ़ॉल्ट ऐप निर्यात करें;आउटपुट
जब उपयोगकर्ता बटन दबाएगा तो बटन टॉगल हो जाएगा।
उदाहरण 2
उपयोगकर्ता द्वारा उस पर क्लिक करने पर टेक्स्ट बदलना।
नीचे दिए गए उदाहरण में, राज्य को कंस्ट्रक्टर के अंदर इस प्रकार प्रदर्शित किया जाता है -
कंस्ट्रक्टर (प्रॉप्स) {सुपर (प्रॉप्स); this.state ={ myState:'ट्यूटोरियल पॉइंट में आपका स्वागत है'};} राज्य myState टेक्स्ट घटक के अंदर इस प्रकार प्रदर्शित होता है -
{this.state.myState}
जब उपयोगकर्ता टेक्स्ट को छूता या दबाता है तो ऑनप्रेस इवेंट सक्रिय हो जाता है और इस विधि को कॉल करता है।
changeState =() => this.setState({myState:'Hello World'})
आउटपुट
