React useStateでselectの選択値を取得する
Reactでプルダウンの選択値を扱うには、selectのvalueとonChangeを使用します。
DOMから取得するvalueは、数値の選択肢を表示していても文字列です。選択値をそのまま識別子として扱うのか、計算に使う数値へ変換するのかを決めてからstateの型を選ぶと、暗黙の型変換による誤りを避けられます。
選択値をstateへ保存する
PrefectureSelect.tsximport { useState } from 'react';
export const PrefectureSelect = () => {
const [prefecture, setPrefecture] = useState('');
return (
<div>
<label htmlFor="prefecture">都道府県</label>
<select
id="prefecture"
value={prefecture}
onChange={(event) => setPrefecture(event.target.value)}
>
<option value="">選択してください</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
<p>選択値: {prefecture || '未選択'}</p>
</div>
);
};初期値を空文字にして、同じ値を持つ案内用のoptionを用意しています。
配列からoptionを作る
const prefectures = [
{ value: 'tokyo', label: '東京都' },
{ value: 'osaka', label: '大阪府' },
{ value: 'fukuoka', label: '福岡県' },
];
<select value={prefecture} onChange={(event) => setPrefecture(event.target.value)}>
<option value="">選択してください</option>
{prefectures.map((item) => (
<option key={item.value} value={item.value}>
{item.label}
</option>
))}
</select>選択肢を配列にすると、APIの結果から選択肢を作る場合にも応用できます。
数値として使用する
event.target.valueは、optionの値が数字に見えても文字列です。
const [quantity, setQuantity] = useState(1);
<select
value={quantity}
onChange={(event) => setQuantity(Number(event.target.value))}
>
<option value="1">1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
</select>数値として計算する場合はNumberで変換します。
selectのvalueには、いずれかのoptionと同じ値を指定します。APIから選択肢を取得する場合は、読み込み後に初期値が存在するか確認します。
文字列と数値の違いに注意すれば、selectもテキストボックスと同じようにstateで管理できます。