বাটন ক্লিক করে React-এ ফর্ম ডেটা প্রসেসিং
পূর্ববর্তী পাঠে আমরা এমনটি করেছিলাম যাতে ইনপুটে একটি অক্ষর টাইপ করতেই ফলাফল তাৎক্ষণিকভাবে প্যারাগ্রাফে দেখা যায়। এটি অবশ্যই সুন্দর দেখায়, তবে এর একটি ত্রুটি রয়েছে।
কল্পনা করুন যে আমাদের একটি নির্দিষ্ট "ভারী", সম্পদ-নিবিড় অপারেশন করতে হবে। প্রতি অক্ষর টাইপ করতেই এটি করা খুব সুবিধাজনক নয় - ডেটার চূড়ান্ত ইনপুটের জন্য অপেক্ষা করা ভাল এবং তারপর প্রয়োজনীয় অপারেশনটি একবার সম্পাদন করা এবং ফলাফলটি প্যারাগ্রাফে প্রদর্শন করা।
এটি করার জন্য আমাদের একটি বাটন প্রবর্তন করা দরকার, যাতে ক্লিক করলে আমাদের সম্পদ-নিবিড় অপারেশনটি সম্পাদিত হবে। এই ক্ষেত্রে, আবার আমাদের প্রতিটি ইনপুটের নিজস্ব স্টেট থাকবে, প্লাস অপারেশনের ফলাফল রেকর্ড করার এবং এটিকে স্ক্রিনে প্রদর্শন করার জন্য আমাদের আরও একটি স্টেটের প্রয়োজন।
একটি উদাহরণ দেখি। আমাদের কাছে দুটি ইনপুট এবং একটি বাটন আছে। বাটনে ক্লিক করলে আসুন ইনপুটে প্রবেশ করা সংখ্যাগুলির যোগফল খুঁজে বের করি।
বাস্তবায়ন করা যাক:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
সংক্ষিপ্ত রূপ ব্যবহার করা যেতে পারে:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
দুটি ইনপুট, দুটি বাটন এবং একটি প্যারাগ্রাফ দেওয়া আছে। ইনপুটগুলিতে সংখ্যা প্রবেশ করানো হোক। প্রথম বাটনে ক্লিক করলে সংখ্যাগুলির যোগফল নির্ণয় করুন, এবং দ্বিতীয় বাটনে ক্লিক করলে - গুণফল নির্ণয় করুন। ফলাফল প্যারাগ্রাফে আউটপুট করুন।
দুটি ইনপুট, একটি বাটন এবং একটি প্যারাগ্রাফ দেওয়া আছে। ইনপুটগুলিতে 2025-12-31 ফরম্যাটে তারিখ প্রবেশ করানো হোক। বাটনে ক্লিক করলে তারিখগুলির মধ্যে পার্থক্য দিনে নির্ণয় করুন এবং ফলাফল প্যারাগ্রাফে আউটপুট করুন।
পূর্ববর্তী সমস্যাটি এমনভাবে পরিবর্তন করুন যাতে ডিফল্টরূপে ইনপুটগুলিতে বর্তমান তারিখ থাকে।
একটি ইনপুট এবং একটি প্যারাগ্রাফ দেওয়া আছে। ইনপুটে একটি সংখ্যা প্রবেশ করানো হয়। ফোকাস হারানো হলে প্রবেশ করা সংখ্যাটির অঙ্কগুলির যোগফল প্যারাগ্রাফে আউটপুট করুন।
একটি ইনপুট এবং একটি প্যারাগ্রাফ দেওয়া আছে। ইনপুটে একটি সংখ্যা প্রবেশ করানো হয়। ফোকাস হারানো হলে প্রবেশ করা সংখ্যাটির ভাজকগুলির গুণফল প্যারাগ্রাফে আউটপুট করুন।
