रिएक्ट में फॉर्म एलिमेंट्स के साथ कैसे काम करें

रिएक्ट के साथ विकसित होने पर फॉर्म और फॉर्म एलिमेंट्स के साथ काम करना जटिल हो सकता है क्योंकि रिएक्ट में एचटीएमएल फॉर्म एलिमेंट्स अन्य डोम एलिमेंट्स की तुलना में कुछ अलग व्यवहार करते हैं।

चेकबॉक्स, टेक्स्टारेस और सिंगल-लाइन टेक्स्ट इनपुट जैसे फॉर्म और फॉर्म एलिमेंट्स के साथ काम करना सीखें।

प्रपत्रों में इनपुट फ़ील्ड प्रबंधित करना

रिएक्ट में, एक इनपुट फ़ील्ड को एक रूप में प्रबंधित करना अक्सर एक राज्य बनाकर और इसे इनपुट फ़ील्ड से बांधकर पूरा किया जाता है।

उदाहरण के लिए:

समारोहअनुप्रयोग() {

const [firstName, setFirstName] = React.useState('');

समारोहहैंडलफर्स्टनाम बदलें(आयोजन) {
सेटफर्स्टनाम( आयोजन।लक्ष्य।कीमत )
}

वापस करना (
<प्रपत्र>
<इनपुट प्रकार ='मूलपाठ' प्लेसहोल्डर ='पहला नाम' onInput={handleFirstNameChange} />
</form>
)
}


ऊपर हमारे पास है पहला नाम राज्य, ए onInput घटना, और ए हैंडल चेंज हैंडलर। हैंडल चेंज फ़ंक्शन अद्यतन करने के लिए प्रत्येक कीस्ट्रोक पर चलता है पहला नाम राज्य।

एक इनपुट क्षेत्र के साथ काम करते समय यह दृष्टिकोण आदर्श हो सकता है, लेकिन अलग-अलग राज्यों का निर्माण और एकाधिक इनपुट के साथ काम करते समय प्रत्येक इनपुट तत्व के लिए हैंडलर फ़ंक्शन दोहराए जाएंगे खेत।

ऐसी स्थितियों में दोहराए जाने वाले और निरर्थक कोड लिखने से बचने के लिए, प्रत्येक इनपुट फ़ील्ड को एक अलग नाम दें, एक ऑब्जेक्ट सेट करें अपने फॉर्म के प्रारंभिक राज्य मूल्य के रूप में, और फिर ऑब्जेक्ट को इनपुट के समान नामों वाले गुणों से भरें खेत।

उदाहरण के लिए:

समारोहअनुप्रयोग() {

कॉन्स्ट [formData, setFormData] = React.useState(
{
पहला नाम: '',
उपनाम: ''
}
);

वापस करना (
<प्रपत्र>
<इनपुट प्रकार ='मूलपाठ' प्लेसहोल्डर ='पहला नाम' नाम ='पहला नाम' />
<इनपुट प्रकार ='मूलपाठ' प्लेसहोल्डर ='उपनाम' नाम ='उपनाम' />
</form>
)
}


फॉर्मडेटा प्रपत्र के अंदर सभी इनपुट फ़ील्ड को प्रबंधित और अद्यतन करने के लिए राज्य चर के रूप में कार्य करेगा। सुनिश्चित करें कि राज्य वस्तु में गुणों के नाम इनपुट तत्वों के नाम के समान हैं।

इनपुट डेटा के साथ स्थिति को अपडेट करने के लिए, एक जोड़ें onInput घटना श्रोता इनपुट तत्व के लिए, फिर अपने बनाए गए हैंडलर फ़ंक्शन को कॉल करें।

उदाहरण के लिए:

समारोहअनुप्रयोग() {

कॉन्स्ट [formData, setFormData] = React.useState(
{
पहला नाम: '',
उपनाम: ''
}
);

समारोहहैंडल चेंज(आयोजन) {
सेटफॉर्मडाटा ((पिछला राज्य) => {
वापस करना {
...पिछला राज्य,
[event.target.name]: आयोजन।लक्ष्य।कीमत
}
})
}

वापस करना (
<प्रपत्र>
<इनपुट
टाइप ='मूलपाठ'
प्लेसहोल्डर ='पहला नाम'
नाम ='पहला नाम'
ऑनइनपुट = {हैंडल चेंज}
/>
<इनपुट
टाइप ='मूलपाठ'
प्लेसहोल्डर ='उपनाम'
नाम ='उपनाम'
ऑनइनपुट = {हैंडल चेंज}
/>
</form>
)
}


ऊपर दिए गए कोड ब्लॉक में a का इस्तेमाल किया गया है onInput घटना और एक हैंडलर समारोह, हैंडलफर्स्टनाम बदलें. यह हैंडलफर्स्टनाम बदलें कॉल किए जाने पर फ़ंक्शन राज्य गुणों को अपडेट करेगा। राज्य गुणों के मान उनके संगत इनपुट तत्वों के समान होंगे।

अपने इनपुट को नियंत्रित घटकों में बदलना

जब एक HTML फॉर्म सबमिट होता है, तो इसका डिफ़ॉल्ट व्यवहार ब्राउज़र में एक नए पेज पर नेविगेट करना होता है। यह व्यवहार कुछ स्थितियों में असुविधाजनक होता है, जैसे जब आप चाहते हैं एक फॉर्म में दर्ज डेटा को मान्य करें. ज्यादातर मामलों में, आपको फॉर्म में दर्ज की गई जानकारी तक पहुंच के साथ एक जावास्क्रिप्ट फ़ंक्शन होना अधिक उपयुक्त लगेगा। इसे नियंत्रित घटकों का उपयोग करके रिएक्ट में आसानी से प्राप्त किया जा सकता है।

index.html फ़ाइलों के साथ, प्रपत्र तत्व अपने राज्य का ट्रैक बनाए रखते हैं और उपयोगकर्ता के इनपुट के जवाब में इसे संशोधित करते हैं। रिएक्ट के साथ, सेट स्टेट फ़ंक्शन घटक की राज्य संपत्ति में संग्रहीत एक गतिशील स्थिति को संशोधित करता है। आप रिएक्ट स्टेट को सत्य का एकल स्रोत बनाकर दोनों राज्यों को जोड़ सकते हैं। इस प्रकार, प्रपत्र बनाने वाला घटक यह नियंत्रित करता है कि जब कोई उपयोगकर्ता डेटा दर्ज करता है तो क्या होता है। रिएक्ट नियंत्रण वाले मानों वाले इनपुट फॉर्म तत्वों को नियंत्रित घटक या नियंत्रित इनपुट कहा जाता है।

अपने रिएक्ट एप्लिकेशन में नियंत्रित इनपुट का उपयोग करने के लिए, अपने इनपुट तत्व में एक वैल्यू प्रोप जोड़ें:

समारोहअनुप्रयोग() {

कॉन्स्ट [formData, setFormData] = React.useState(
{
पहला नाम: '',
उपनाम: ''
}
);

समारोहहैंडल चेंज(आयोजन) {
सेटफॉर्मडाटा ((पिछला राज्य) => {
वापस करना {
...पिछला राज्य,
[event.target.name]: आयोजन।लक्ष्य।कीमत
}
})
}

वापस करना (
<प्रपत्र>
<इनपुट
टाइप ='मूलपाठ'
प्लेसहोल्डर ='पहला नाम'
नाम ='पहला नाम'
ऑनइनपुट = {हैंडल चेंज}
मान = {formData.firstName}
/>
<इनपुट
टाइप ='मूलपाठ'
प्लेसहोल्डर ='उपनाम'
नाम ='उपनाम'
ऑनइनपुट = {हैंडल चेंज}
मान = {formData.lastName}
/>
</form>
)
}


इनपुट तत्वों के मान गुण अब संबंधित राज्य गुणों के मान के रूप में सेट किए गए हैं। नियंत्रित घटक का उपयोग करते समय इनपुट का मूल्य हमेशा राज्य द्वारा निर्धारित किया जाता है।

टेक्स्टारिया इनपुट तत्व को संभालना

पाठ क्षेत्र तत्व किसी भी नियमित इनपुट तत्व की तरह है लेकिन बहु-पंक्ति इनपुट रखता है। एक से अधिक पंक्तियों की आवश्यकता वाली जानकारी पास करते समय यह उपयोगी होता है।

एक index.html फ़ाइल में, पाठ क्षेत्र टैग तत्व अपने बच्चों द्वारा इसका मूल्य निर्धारित करता है, जैसा कि नीचे दिए गए कोड ब्लॉक में देखा गया है:

<पाठ क्षेत्र>
नमस्ते, आप कैसे हैं?
</textarea>


प्रतिक्रिया के साथ, का उपयोग करने के लिए पाठ क्षेत्र तत्व, आप प्रकार के साथ एक इनपुट तत्व बना सकते हैं पाठ क्षेत्र.

जैसे इतना:

समारोहअनुप्रयोग() {

वापस करना (
<प्रपत्र>
<इनपुट प्रकार ='पाठ क्षेत्र' नाम ='संदेश'/>
</form>
)
}


उपयोग करने का एक विकल्प पाठ क्षेत्र एक इनपुट प्रकार के रूप में उपयोग करना है पाठ क्षेत्र इनपुट प्रकार टैग के स्थान पर तत्व टैग, जैसा कि नीचे देखा गया है:

समारोहअनुप्रयोग() {

वापस करना (
<प्रपत्र>
<पाठ क्षेत्र
नाम ='संदेश'
मूल्य ='नमस्ते, आप कैसे हैं?'
/>
</form>
)
}


पाठ क्षेत्र टैग में एक मान विशेषता है जो उपयोगकर्ता की जानकारी को दर्ज करती है पाठ क्षेत्र तत्व। यह इसे डिफ़ॉल्ट रिएक्ट इनपुट तत्व की तरह काम करता है।

रिएक्ट के चेकबॉक्स इनपुट एलिमेंट के साथ काम करना

साथ काम करते समय चीजें थोड़ी अलग होती हैं चेक बॉक्स आदानों। प्रकार का इनपुट क्षेत्र चेक बॉक्स कोई मान विशेषता नहीं है। हालाँकि, इसमें एक है चेक किए गए गुण। यह चेक किए गए यह निर्धारित करने के लिए कि बॉक्स चेक किया गया है या अनचेक किया गया है, बूलियन मान की आवश्यकता के कारण विशेषता मान विशेषता से भिन्न होती है।

उदाहरण के लिए:

समारोहअनुप्रयोग() {

वापस करना (
<प्रपत्र>
<इनपुट प्रकार ='चेक बॉक्स' आईडी ='में शामिल होने' नाम ='जोड़ना' />
<लेबल htmlFor='में शामिल होने'>क्या आप हमारी टीम में शामिल होना चाहेंगे?</label>
</form>
)
}


लेबल तत्व का उपयोग कर इनपुट तत्व की आईडी को संदर्भित करता है htmlके लिए गुण। यह htmlके लिए विशेषता इनपुट तत्व की आईडी लेती है—इस मामले में, शामिल होना। कब एक HTML फॉर्म बनाना, द htmlके लिए गुण दर्शाता है के लिए गुण।

चेक बॉक्स एक नियंत्रित इनपुट के रूप में बेहतर उपयोग किया जाता है। आप इसे एक राज्य बनाकर और इसे सत्य या असत्य के प्रारंभिक बूलियन मान को निर्दिष्ट करके प्राप्त कर सकते हैं।

आपको दो प्रॉप्स को शामिल करना चाहिए चेक बॉक्स इनपुट तत्व: ए चेक किए गए संपत्ति और एक परिवर्तन पर एक हैंडलर फ़ंक्शन के साथ ईवेंट जो राज्य के मान का उपयोग करके निर्धारित करेगा सेट की जांच की गई () समारोह।

उदाहरण के लिए:

समारोहअनुप्रयोग() {

कॉन्स्ट [चेक किया गया है, सेट किया गया है] = React.useState (असत्य);

समारोहहैंडल चेंज() {
setIsChecked ((prevState) => !prevState )
}

वापस करना (
<प्रपत्र>
<इनपुट
टाइप ='चेक बॉक्स'
आईडी ='में शामिल होने'
नाम ='जोड़ना'
चेक किया गया = {चेक किया गया}
ऑन चेंज = {हैंडल चेंज}
/>
<लेबल htmlFor='में शामिल होने'>क्या आप हमारी टीम में शामिल होना चाहेंगे?</label>
</form>
)
}


यह कोड ब्लॉक एक उत्पन्न करता है जाँच की गई है राज्य, और इसके प्रारंभिक मान को सेट करता है असत्य. यह का मान सेट करता है जाँच की गई है तक चेक किए गए इनपुट तत्व में विशेषता। हैंडल चेंज फ़ंक्शन आग लगाएगा और राज्य के मूल्य को बदल देगा जाँच की गई है इसके विपरीत जब भी आप चेकबॉक्स पर क्लिक करते हैं।

एक फॉर्म तत्व में विभिन्न प्रकार के कई इनपुट तत्व हो सकते हैं, जैसे चेकबॉक्स, टेक्स्ट इत्यादि।

ऐसे मामलों में, आप उन्हें उसी तरह से हैंडल कर सकते हैं जैसे आपने एक ही प्रकार के कई इनपुट एलिमेंट्स को हैंडल किया था।

यहाँ एक उदाहरण है:

समारोहअनुप्रयोग() {

होने देना[formData, setFormData] = React.useState(
{
पहला नाम: ''
जोड़ना: सत्य,
}
);

समारोहहैंडल चेंज(आयोजन) {

कॉन्स्ट {नाम, मूल्य, प्रकार, जाँच} = event.target;

सेटफॉर्मडाटा ((पिछला राज्य) => {
वापस करना {
...पिछला राज्य,
[नाम]: प्रकार चेकबॉक्स? चेक किया गया: मूल्य
}
})
}

वापस करना (
<प्रपत्र>
<इनपुट
टाइप ='मूलपाठ'
प्लेसहोल्डर ='पहला नाम'
नाम ='पहला नाम'
ऑनइनपुट = {हैंडल चेंज}
मान = {formData.firstName}
/>
<इनपुट
टाइप ='चेक बॉक्स'
आईडी ='में शामिल होने'
नाम ='जोड़ना'
जाँच = {formData.join}
ऑन चेंज = {हैंडल चेंज}
/>
<लेबल htmlFor='में शामिल होने'>क्या आप हमारी टीम में शामिल होना चाहेंगे?</label>
</form>
)
}


ध्यान दें कि में हैंडल चेंज समारोह, सेटफॉर्मडाटा के मान को असाइन करने के लिए एक टर्नरी ऑपरेटर का उपयोग करता है चेक किए गए संपत्ति राज्य गुणों के लिए यदि लक्ष्य इनपुट प्रकार एक है चेक बॉक्स. यदि नहीं, तो यह के मान असाइन करता है कीमत गुण।

अब आप रिएक्ट फॉर्म को हैंडल कर सकते हैं

आपने यहां विभिन्न फॉर्म इनपुट तत्वों का उपयोग करके रिएक्ट में फॉर्म के साथ काम करना सीखा। आपने यह भी सीखा कि चेकबॉक्स के साथ काम करते समय वैल्यू प्रोप या चेक किए गए प्रोप को जोड़कर अपने फॉर्म एलिमेंट्स में नियंत्रित इनपुट कैसे लागू करें।

रिएक्ट फॉर्म इनपुट तत्वों की कुशल हैंडलिंग आपके रिएक्ट एप्लिकेशन के प्रदर्शन में सुधार करेगी, जिसके परिणामस्वरूप एक बेहतर उपयोगकर्ता अनुभव होगा।