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-এর আগে যোগ করুন