Sifa value katika kichaguzi (select) kwenye React

Sasa hebu tuseme katika vitenzi option kuna sifa value:

function App() {
	return <div>
		<select>
			<option value="1">maandishi1</option>
			<option value="2">maandishi2</option>
			<option value="3">maandishi3</option>
		</select>
	</div>;
}

Katika kesi kama hii, kwa sababu ya kuwapo kwa sifa value, thamani zitakazoingia kwenye hali (state) zitakuwa ni zile thamani za sifa, wala si maandishi ya vitenzi option. Tunaweza kuthibitisha hili kwa kuonyesha matokeo ya uchaguzi kwenye aya:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">maandishi1</option>
			<option value="2">maandishi2</option>
			<option value="3">maandishi3</option>
		</select>
		<p>
			uchaguzi wako: {value}
		</p>
	</div>;
}

Kutenganisha maandishi ya option na thamani yake kunaweza kuwa rahisi: maandishi ya kiwango tunaweza kubadilisha jinsi tunavyotaka, wakati huo huo kwenye hati yetu (script) matokeo ya uchaguzi yatachukuliwa kulingana na thamani ya sifa value, ambayo itabaki isiyobadilika.

Angalia mfano:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">maandishi1</option>
			<option value="2">maandishi2</option>
			<option value="3">maandishi3</option>
		</select>
		<p>
			{value === '1' && 'umechagua kipengee cha kwanza'}
			{value === '2' && 'umechagua kipengee cha pili'}
			{value === '3' && 'umechagua kipengee cha tatu'}
		</p>
	</div>;
}

Sasa, tukibadilisha maandishi ya vitenzi option, utendakazi wa hati hautaathirika - kwani imeshikamana na thamani ya sifa value.

Kwa kutumia orodha inayojitokeza (drop-down), pendekeza mtumiaji achague kikundi gani cha umri anachohusika: kutoka 0 hadi 12 miaka, kutoka 13 hadi 17, kutoka 18 hadi 25, au zaidi ya 25 miaka.