React Forms - Select

1. Select

Reactにおけるドロップダウンリスト（セレクトボックス）の扱いは、標準的なHTMLとは少し異なります。

従来のHTMLでは、ドロップダウンリスト内で選択されている値は、selected 属性を用いて定義されていました。

HTMLの例:

<select>
  <option value="Ford">フォード</option>
  <option value="Volvo" selected>ボルボ</option>
  <option value="Fiat">フィアット</option>
</select>

対してReactでは、select タグに value 属性を付与することで、選択されている値を定義します。

2. Reactによる実装例

Reactは value 属性を使用してセレクトボックスを制御（コントロール）します。

import { useState } from 'react';

function MyForm() {
  // ボルボを初期値として設定
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value)
  }

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">フォード</option>
        <option value="Volvo">ボルボ</option>
        <option value="Fiat">フィアット</option>
      </select>
    </form>
  )
}