Value-attribuutit select-elementissä Reactissa

Oletetaan nyt, että option -tageissa on value -attribuutit:

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

Tässä tapauksessa value -attribuuttien vuoksi stateen pääsevät juuri niiden arvot, eivät option -tagien tekstit. Voit varmistaa tämän tulostamalla valinnan tuloksen kappaleeseen:

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

option -tagin tekstin ja sen arvon erottaminen voi olla kätevää: tagin tekstiä voimme muuttaa miten haluamme, samalla kun skriptissämme valinnan tulos käsitellään value -attribuutin arvon perusteella, joka pysyy muuttumattomana.

Katso esimerkki:

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' && 'valitsit ensimmäisen vaihtoehdon'}
			{value === '2' && 'valitsit toisen vaihtoehdon'}
			{value === '3' && 'valitsit kolmannen vaihtoehdon'}
		</p>
	</div>;
}

Nyt, jos muutamme option -tagien tekstejä, skriptin toiminta ei häiriinny - koska se liittyy value -attribuutin arvoon.

Pudotusvalikon avulla anna käyttäjän valita mihin ikäryhmään hän kuuluu: 0 - 12 vuotta, 13 - 17 vuotta, 18 - 25 vuotta, tai yli 25 vuotiaat.