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;
}