Reactにおけるセレクトのvalue属性

ここで、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歳以上。