चेकबॉक्स एक सामान्य घटक है जिसका उपयोग हम अक्सर UI पर करते हैं। हमारे पास प्रतिक्रियाशील में चेकबॉक्स दिखाने के कुछ अच्छे तरीके हैं।
मूल प्रतिक्रिया-मूल पैकेज में चेकबॉक्स समर्थन नहीं है और इसके साथ काम करने के लिए आपको एक पैकेज स्थापित करने की आवश्यकता है।
चेकबॉक्स प्रदर्शित करने के लिए निम्नलिखित पैकेज को स्थापित करना होगा -
npm install --save-dev React-native-paper
मूल चेकबॉक्स घटक इस प्रकार है -
<चेकबॉक्स स्थिति={checkboxstatus} onPress={onCheckboxCheckedfunc} /> आइए अब चेकबॉक्स पर कुछ महत्वपूर्ण गुण देखें -
| Props | विवरण |
|---|---|
| स्थिति | स्थिति को दिया जा सकने वाला मान चेक किया हुआ, अनियंत्रित और अनिश्चित होता है। |
| अक्षम | मान बूलियन है। इसका उपयोग चेकबॉक्स को सक्षम/अक्षम करने के लिए किया जा सकता है। |
| प्रेस पर | वह फ़ंक्शन जिसे चेकबॉक्स चेक किए जाने पर कॉल किया जाएगा। |
| रंग | चेकबॉक्स को दिया जाने वाला रंग |
| रंग को अनचेक करें | अनचेक मोड में चेकबॉक्स का रंग। |
यहाँ एक साधारण चेकबॉक्स डिस्प्ले है -
यूज़स्टेट का उपयोग चेकबॉक्स के लिए चेक की गई, अनियंत्रित स्थिति को सेट करने के लिए किया जाता है, जैसा कि नीचे दिखाया गया है -
const [चेक किया गया, सेट चेक किया गया] =React.useState(false);
राज्य को चेक किए गए चर के अंदर बनाए रखा जाता है और इसे अद्यतन करने के लिए सेटचेक विधि का उपयोग किया जाता है।
जब उपयोगकर्ता चेक बॉक्स को चेक/अनचेक करता है तो चेक की गई स्थिति अपडेट हो जाएगी -
onPress={() => { setchecked(!checked);}} पूरा कोड इस प्रकार है -
उदाहरण
<पूर्व> आयात * 'प्रतिक्रिया' से प्रतिक्रिया के रूप में; आयात {शैलीपत्रक, पाठ, SafeAreaView} 'प्रतिक्रिया-मूल' से चेक किया गया, सेट चेक किया गया] =React.useState(false); वापसी ( uncheckColor={'red'} />आउटपुट
