रिएक्ट में सेलेक्ट में वैल्यू एट्रिब्यूट्स
अब मान लीजिए कि option टैग्स में
value एट्रिब्यूट्स हैं:
function App() {
return <div>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
</div>;
}
ऐसे मामले में, value एट्रिब्यूट्स की उपस्थिति के कारण
स्टेट में उनके मान ही जाएंगे,
न कि option टैग्स के टेक्स्ट। इसकी पुष्टि
चयन के परिणाम को एक पैराग्राफ में आउटपुट करके की जा सकती है:
function 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 एट्रिब्यूट के
मान के अनुसार प्रोसेस होगा, जो अपरिवर्तित रहेगा।
उदाहरण देखें:
function 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 एट्रिब्यूट के मान से बंधी हुई है।
ड्रॉपडाउन लिस्ट की सहायता से उपयोगकर्ता को सुझाव दें
कि वह किस आयु वर्ग में आता है:
0 से 12 वर्ष, 13
से 17, 18 से 25,
या 25 वर्ष से अधिक।
