Les attributs value dans les sélecteurs en React

Supposons maintenant que nos balises option aient des attributs value :

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

Dans ce cas, en raison de la présence des attributs value, ce sont leurs valeurs qui seront stockées dans le state, et non les textes des balises option. On peut le vérifier en affichant le résultat de la sélection dans un paragraphe :

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

Séparer le texte du option et sa valeur peut être pratique : nous pouvons modifier le texte de la balise comme bon nous semble, tandis que dans notre script le résultat de la sélection sera traité selon la valeur de l'attribut value, qui restera inchangée.

Regardez l'exemple :

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' && 'vous avez choisi la première option'}
			{value === '2' && 'vous avez choisi la deuxième option'}
			{value === '3' && 'vous avez choisi la troisième option'}
		</p>
	</div>;
}

Désormais, si nous modifions les textes des balises option, le fonctionnement du script ne sera pas perturbé - car il est lié à la valeur de l'attribut value.

À l'aide d'une liste déroulante, proposez à l'utilisateur de choisir à quel groupe d'âge il appartient : de 0 à 12 ans, de 13 à 17, de 18 à 25, ou plus de 25 ans.