7.5 ফর্ম ক্রিয়েট করে সাবমিট
ফর্ম হ্যান্ডেলিং সফটওয়্যার ডেভেলপমেন্টের একটি কমন কাজ। আমরা এখন একটি উদাহরন দেখব,
import React from 'react'
interface FormProps {
onSubmit: (data: FormData) => void;
}
interface FormData {
name: string;
age: number;
}
function Form({ onSubmit }: FormProps) {
const [formData, setFormData] = React.useState<FormData>({ name: '', age: 0 });
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
onSubmit(formData);
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleInputChange} />
</label>
<br />
<label>
Age:
<input type="number" name="age" value={formData.age} onChange={handleInputChange} />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default Form;
রিয়েক্ট এবং টাইপস্ক্রিপ্ট এর মাধ্যমে ফর্মের জন্য আমরা একটা কম্পোনেন্ট তৈরি করি। এটার জন্য আমরা প্রথমে Form.tsx নামে এক টি ফাইল তৈরি করি। এখানে আমরা Form নামে এক টা ফাংশনাল কম্পোনেন্ট তৈরি করেছি।
এরপর আমরা দুইটি ইন্টারফেস তৈরি করেছি FormProps এবং FormData নামে। FormProps আমাদের কম্পোনেন্ট এর ইনপুট props ডিফাইন করে। এর মধ্যে একটি property হল onSubmit যেই ফাংশনটি FormData কে আর্গুমেন্ট হিসাবে নেয়। FormData আমাদের ফর্মের ডাটা স্ট্রাকচার ডিফাইন করে। এর মধ্যে আছে name, age প্রপার্টি এবং এই দুইটিই স্ট্রিং ভ্যালু accept করে।
এছাড়াও আমরা useState ব্যাবহার করে একটি শূন্য state তৈরি করেছি। আমরা formData কে একটি ফাঁকা অবজেক্ট হিসেবে ডিফাইন করেছি শুরুতে যাতে ইউজার রা তাদের name ও age ইনপুট দিতে পারে। আমরা handleInputChange এবং handleSubmit নামের দুটি ফাংশন তৈরি করি যারা ইনপুট ফিল্ডের ভ্যালু আপডেট এবং ফর্ম সাবমিট হ্যান্ডেল করবে।
একটি লক্ষণীয় বিষয় হলো আমরা handleSubmit ফাংশনের বডিতে event.preventDefault() লিখেছি। এটি ফর্ম সাবমিটের সময় পেজ রিফ্রেশ হওয়া বন্ধ করবে।
এখন আমরা এই Form কম্পোনেন্টটি যেকোন যায়গায় ব্যাবহার করতে পারব। আমাদের কে শুধু একটি হ্যান্ডেলার ফাংশন দিতে হবে যেটি আর্গুমেন্ট হিসাবে FormData নিবে।
<Form onSubmit={handleSubmit} />
