問題一覧に戻る
中級フォーム処理
問題46: セレクトボックス

ドロップダウンメニューから選択肢を選ぶセレクトボックスの実装を学びます。valueとonChangeを使用して制御コンポーネントとして扱い、選択された値をstateで管理します。optionタグで選択肢を定義し、value属性で値を設定します。セレクトボックスは、限られた選択肢から1つを選ぶUIとして頻繁に使用されます。フォーム送信時には選択された値を簡単に取得でき、バリデーションも容易に実装できます。

import React, { useState } from 'react';

function Select() {
  const [size, setSize] = useState("M");

  return (
    <div>
      {/* セレクトボックスを制御 */}
      <
        ={size}
        ={(e) => setSize(e.target.value)}
      >
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
      </>
      <p>サイズ: {size}</p>
    </div>
  );
}

export default Select;
···