Redux में फॉर्म में परिवर्तन करना

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

आइए हमारा उत्पाद एप्लिकेशन खोलें, और इसमें फ़ाइल NewProductForm.jsx खोलें। आइए return कमांड से पहले कोड का एक टुकड़ा जोड़ें ड्रॉपडाउन सूची के मार्कअप के लिए, जिसमें हम विक्रेता का चयन करेंगे। इसे के माध्यम से लागू करें map के साथ मानक तरीका:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

और अब मार्कअप में ही बदलाव करेंगे। इसके लिए फॉर्म में पहले और दूसरे के बीच पैराग्राफ (नाम के मार्कअप ब्लॉक्स के बीच और उत्पाद विवरण) में निम्नलिखित मार्कअप वाला एक पैराग्राफ डालेंगे:

<p>
	<label htmlFor="prodSeller">विक्रेता:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

अब हम अपना एप्लिकेशन चला सकते हैं। जोड़ने के फॉर्म में हमारे पास एक सूची दिखाई दी है विक्रेताओं के साथ। आइए फॉर्म को डेटा से भरने का प्रयास करें, उनमें से एक का चयन करें और सेव बटन पर क्लिक करें। अब, अगर हम Redux DevTools में देखें, तो हम परिवर्तन देखेंगे - नए जोड़े गए में उत्पाद में हमारी संपत्ति दिखाई दी है seller चयनित विक्रेता की आईडी के साथ मान के रूप में। स्टेट टैब में अब दो स्लाइस दिखाई देते हैं products और sellers।

अपना छात्र एप्लिकेशन खोलें। फ़ाइल NewStudentForm.jsx में बनाएं ड्रॉपडाउन सूची teachersList map की सहायता से, जिसमें शिक्षकों के नाम होंगे, जैसा कि पाठ में दिखाया गया है।

मार्कअप में परिवर्तन करें, एक और ब्लॉक जोड़कर शिक्षकों की ड्रॉपडाउन सूची दिखाने के लिए।

अपना एप्लिकेशन चलाएं। जोड़ने के फॉर्म में छात्र के लिए आपके पास शिक्षकों की एक ड्रॉपडाउन सूची दिखाई देनी चाहिए, जो आपने पिछले कार्यों में बनाई थी।