Redux में फॉर्म जोड़ना

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

चलिए form टैग्स के अंदर प्रत्येक फ़ील्ड के लिए मार्कअप रखते हैं, जिसमें जानकारी दर्ज की जाएगी। पहला इनपुट उत्पाद के नाम के लिए होगा और इसका मार्कअप इस प्रकार होगा:

products/NewProductForm.jsx<form>
  <p>
    <label htmlFor="productName">नाम:</label>
    <input
      id="productName"
      name="productName"
      value={name}
      onChange={onNameChanged}
    />
  </p>
</form>

दूसरा textarea होगा जो उत्पाद के विवरण के लिए होगा:

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">विवरण:</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

कीमत और मात्रा के लिए बचे हुए दो इनपुट्स का कोड स्वयं लिखें जिनके आईडी productPrice और productAmount होंगे।

सभी चार इनपुट फ़ील्ड्स के बाद, form बंद करने वाले टैग से पहले सेव करने के लिए एक बटन जोड़ें:

products/NewProductForm.jsx<button type="button">सेव करें</button>

फॉर्म वाला हमारा कंपोनेंट तैयार है। चलिए इसे मुख्य पेज पर दिखाते हैं। इसके लिए root.jsx फ़ाइल खोलें, इसमें कंपोनेंट इम्पोर्ट करें:

app/root.jsximport { NewProductForm } from '../parts/products/NewProductForm'

और इसे hr टैग और ProductsList कंपोनेंट के बीच में इस तरह डालें:

app/root.jsx<hr></hr>
<NewProductForm />
<ProductsList />

चलिए हमारा एप्लिकेशन चलाते हैं और फॉर्म और उत्पादों की सूची को देखते हैं। चलिए index.css में कुछ स्टाइल्स और जोड़ते हैं:

index.css#main-page {
  max-width: 600px;
}

select,
textarea,
input,
button {
  font-size: 18px;
}

form {
  margin-bottom: 20px;
  border-bottom: 2px solid lightgray;
  padding-bottom: 10px;
}

form p {
  margin: 5px;
}