Redux में फॉर्म जोड़ना
पिछले पाठ में, हमने सीखा कि फॉर्म के इनपुट फ़ील्ड्स के लिए स्टेट्स का उपयोग किया जा सकता है, जो केवल एक कंपोनेंट के अंदर काम करेंगे, और एक खाली फॉर्म बनाया।
चलिए form टैग्स के अंदर प्रत्येक फ़ील्ड के लिए
मार्कअप रखते हैं, जिसमें
जानकारी दर्ज की जाएगी। पहला इनपुट उत्पाद के नाम के लिए होगा और इसका मार्कअप
इस प्रकार होगा:
<form>
<p>
<label htmlFor="productName">नाम:</label>
<input
id="productName"
name="productName"
value={name}
onChange={onNameChanged}
/>
</p>
</form>
दूसरा textarea होगा जो उत्पाद के विवरण
के लिए होगा:
<p>
<label htmlFor="productDesc">विवरण:</label>
<textarea
id="productDesc"
name="productDesc"
value={desc}
onChange={onDescChanged}
/>
</p>
कीमत और मात्रा के लिए बचे हुए दो इनपुट्स का कोड स्वयं लिखें
जिनके आईडी productPrice और
productAmount होंगे।
सभी चार इनपुट फ़ील्ड्स के बाद,
form बंद करने वाले टैग से पहले सेव करने के लिए
एक बटन जोड़ें:
<button type="button">सेव करें</button>
फॉर्म वाला हमारा कंपोनेंट तैयार है। चलिए इसे
मुख्य पेज पर दिखाते हैं। इसके लिए
root.jsx फ़ाइल खोलें, इसमें कंपोनेंट इम्पोर्ट करें:
import { NewProductForm } from '../parts/products/NewProductForm'
और इसे hr टैग और
ProductsList कंपोनेंट के बीच में इस तरह डालें:
<hr></hr>
<NewProductForm />
<ProductsList />
चलिए हमारा एप्लिकेशन चलाते हैं और फॉर्म और उत्पादों की सूची को देखते हैं। चलिए
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;
}
अपना छात्रों वाला एप्लिकेशन खोलें। अपने फॉर्म के लिए मार्कअप बनाएं, जैसा कि पाठ में दिखाया गया है।
NewStudentForm कंपोनेंट को
मुख्य पेज पर StudentsList से पहले जोड़ें
