React-এ সিলেক্টে value অ্যাট্রিবিউট

এখন ধরুন যে option ট্যাগগুলিতে value অ্যাট্রিবিউট রয়েছে:

jsxfunction App() {
  return <div>
    <select>
      <option value="1">text1</option>
      <option value="2">text2</option>
      <option value="3">text3</option>
    </select>
  </div>;
}

এই ক্ষেত্রে, value অ্যাট্রিবিউট থাকার কারণে, স্টেটে option ট্যাগের টেক্সট নয় বরং তাদের মানগুলি যাবে। আপনি নির্বাচনের ফলাফলটি একটি অনুচ্ছেদে আউটপুট করে এটি যাচাই করতে পারেন:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={(event) => setValue(event.target.value)}>
      <option value="1">text1</option>
      <option value="2">text2</option>
      <option value="3">text3</option>
    </select>
    <p>
      আপনার পছন্দ: {value}
    </p>
  </div>;
}

option-এর টেক্সট এবং এর মান আলাদা করা সুবিধাজনক হতে পারে: আমরা ট্যাগের টেক্সটটি ইচ্ছামতো পরিবর্তন করতে পারি, একই সাথে আমাদের স্ক্রিপ্টে value অ্যাট্রিবিউটের মান অনুসারে নির্বাচনের ফলাফল প্রক্রিয়া করা হবে, যা অপরিবর্তিত থাকবে।

উদাহরণ দেখুন:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={event => setValue(event.target.value)}>
      <option value="1">text1</option>
      <option value="2">text2</option>
      <option value="3">text3</option>
    </select>
    <p>
      {value === '1' && 'আপনি প্রথম আইটেম পছন্দ করেছেন'}
      {value === '2' && 'আপনি দ্বিতীয় আইটেম পছন্দ করেছেন'}
      {value === '3' && 'আপনি তৃতীয় আইটেম পছন্দ করেছেন'}
    </p>
  </div>;
}

এখন, আমরা যদি option ট্যাগের টেক্সট পরিবর্তন করি, তবে স্ক্রিপ্টের কাজ বিঘ্নিত হবে না - কারণ এটি value অ্যাট্রিবিউটের মানের সাথে সংযুক্ত।