序
Reactでセレクトボックスを実装する方法です。
調べて時間がかかったので、自分用も兼ねて記事にしました。
サンプルコード(そのままコピペ)
App.js
export const App = (props) => {
const arr = ["りんご","みかん","ぶどう","いちご"]
let txt = "みかん"
function method(data){
txt = data
}
return (
<>
<select
onChange={(e) => method(e.target.value)}
value="0">
{arr().map((data, index) => {
return <option value={data}>{index + 1}. {data}</option>;
//選択肢はこんなかんじ
// 1.りんご
// 2.みかん
// 3.ぶどう
// 4.いちご
})}
</select>
</>
);
}
セレクトボックスによってtxt変数の値を変更するコードです。
少し解説(急がない人向け)
selectタグ
App.js
<select
onChange={(e) => method(e.target.value)}>
value="0" // 初期表示(selected)
まず普通のselectです。
onChangeはselectに変化があったら処理を実行するというものです。今回はmethod()を呼び出します。
valueは初期表示を指定することができます。optionタグを使ったときに使える「selected」です。
App.js
<select>
<option>りんご</option>
<option selected>みかん</option> {/* ←これ */}
<option>ぶどう</option>
<option>いちご</option>
</select>
optionタグ
App.js
{arr().map((data, index) => {
return <option value={data}>{index+1}. {data}</option>;
})}
今回はmapを使ってoptionタグを繰り返すようプログラムしてみました。optionタグを量産してもよいのですが、あんまりカッコよくない＋Reactのスキルを上げたかったのでmap使ってみました。
dataとindexが繰り返しごとに違う値を持ちます。初回は[data→"りんご", index→0]、次回は[data→"みかん", index→1]という具合です。
りんごは「1.」で表示させたかったので、0からはじまるindexは+1して表示させています
arrがオブジェクトの時はこんな感じで指定します
arr = [{name: "りんご", price: 100},{name: "みかん", price: 150}]
{arr().map((data, index) => {
return <option value={data}>{index}. {data.name}:{data.price}円</option>;
// 選択肢はこんなかんじ
// 1.りんご:100円
// 2.みかん:150円
})}
終
Reactで書いた時のコードですが、ここらへんの本質はJavaScriptのため、細かい記法を合わせればどのJS技術でも使えるコードになっています。
「じゃあfor文でよくね？」という声もある気がしますが、map、慣れましょう。慣れると便利です、多分。