বাটন ক্লিক করে React-এ ফর্ম ডেটা প্রসেসিং

পূর্ববর্তী পাঠে আমরা এমনটি করেছিলাম যাতে ইনপুটে একটি অক্ষর টাইপ করতেই ফলাফল তাৎক্ষণিকভাবে প্যারাগ্রাফে দেখা যায়। এটি অবশ্যই সুন্দর দেখায়, তবে এর একটি ত্রুটি রয়েছে।

কল্পনা করুন যে আমাদের একটি নির্দিষ্ট "ভারী", সম্পদ-নিবিড় অপারেশন করতে হবে। প্রতি অক্ষর টাইপ করতেই এটি করা খুব সুবিধাজনক নয় - ডেটার চূড়ান্ত ইনপুটের জন্য অপেক্ষা করা ভাল এবং তারপর প্রয়োজনীয় অপারেশনটি একবার সম্পাদন করা এবং ফলাফলটি প্যারাগ্রাফে প্রদর্শন করা।

এটি করার জন্য আমাদের একটি বাটন প্রবর্তন করা দরকার, যাতে ক্লিক করলে আমাদের সম্পদ-নিবিড় অপারেশনটি সম্পাদিত হবে। এই ক্ষেত্রে, আবার আমাদের প্রতিটি ইনপুটের নিজস্ব স্টেট থাকবে, প্লাস অপারেশনের ফলাফল রেকর্ড করার এবং এটিকে স্ক্রিনে প্রদর্শন করার জন্য আমাদের আরও একটি স্টেটের প্রয়োজন।

একটি উদাহরণ দেখি। আমাদের কাছে দুটি ইনপুট এবং একটি বাটন আছে। বাটনে ক্লিক করলে আসুন ইনপুটে প্রবেশ করা সংখ্যাগুলির যোগফল খুঁজে বের করি।

বাস্তবায়ন করা যাক:

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

সংক্ষিপ্ত রূপ ব্যবহার করা যেতে পারে:

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