Reactda Selectda value Attributlari

Endi faraz qilaylik, option teglarida value attributlari mavjud:

jsxfunction App() {
  return <div>
    <select>
      <option value="1">matn1</option>
      <option value="2">matn2</option>
      <option value="3">matn3</option>
    </select>
  </div>;
}

Bunday holatda, value attributlari mavjudligi sababli, statega aynan ularning qiymatlari tushadi, option teglarining matnlari emas. Buni isbotlash uchun tanlov natijasini paragrafda chiqarib ko'ramiz:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={(event) => setValue(event.target.value)}>
      <option value="1">matn1</option>
      <option value="2">matn2</option>
      <option value="3">matn3</option>
    </select>
    <p>
      sizning tanlovingiz: {value}
    </p>
  </div>;
}

option tegi matnini va uning qiymatini ajratib ishlatish qulay bo'lishi mumkin: teg matnini biz xohlaganimizcha o'zgartirishimiz mumkin, shu bilan birga skriptimizda tanlov natijasi value atributi qiymati bo'yicha qayta ishlanadi, bu esa o'zgarishsiz qoladi.

Misolnı ko'ring:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={event => setValue(event.target.value)}>
      <option value="1">matn1</option>
      <option value="2">matn2</option>
      <option value="3">matn3</option>
    </select>
    <p>
      {value === '1' && 'siz birinchi bandni tanladingiz'}
      {value === '2' && 'siz ikkinchi bandni tanladingiz'}
      {value === '3' && 'siz uchinchi bandni tanladingiz'}
    </p>
  </div>;
}

Endi agar biz option teglarining matnlarini o'zgartirsak, skript ishlash buzilmaydi - chunki u value atributi qiymatiga bog'langan.