Atributet value në select në React

Le të themi tani që në taget option keni atributet value:

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

Në këtë rast, për shkak të pranisë së atributeve value, në state do të vendosen vlerat e tyre, dhe jo tekstet e tag-eve option. Mund ta verifikoni këtë duke shfaqur rezultatin e përzgjedhjes në një paragraf:

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>
			zgjedhja juaj: {value}
		</p>
	</div>;
}

Ndarja e tekstit të option dhe vlerës së tij mund të jetë e përshtatshme: tekstin e tag-ut mund ta ndryshojmë sikur të duam, ndërkohë që në skriptin tonë rezultati i përzgjedhjes do të përpunohet sipas vlerës së atributit value, e cila do të mbetet e pandryshuar.

Shikoni shembullin:

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' && 'keni zgjedhur artikullin e parë'}
			{value === '2' && 'keni zgjedhur artikullin e dytë'}
			{value === '3' && 'keni zgjedhur artikullin e tretë'}
		</p>
	</div>;
}

Tani, nëse ndryshojmë tekstet e tag-eve option, funksionimi i skriptit nuk do të prishet - sepse ai është i lidhur me vlerën e atributit value.

Përmes një liste rënëse, ofroni përdoruesit të zgjedhë në cilën grup moshe ai bën pjesë: nga 0 deri në 12 vjeç, nga 13 deri në 17, nga 18 deri në 25, ose më i vjetër se 25 vjeç.