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

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

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

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

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

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

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