React: useState と useRef を使って選択状態を管理する

2024-04-02

React JSX: 選択された <select> オプションで「選択済み」を選択する

このチュートリアルでは、React JSXを使用して、select 要素で選択されたオプションに「選択済み」属性を設定する方法を学びます。

事前準備

このチュートリアルを始める前に、以下のものが必要です。

Node.js
npm または Yarn

手順

新しい React プロジェクトを作成します。

npx create-react-app my-app

App.js ファイルを開き、以下のコードを追加します。

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

function App() {
  const [selectedValue, setSelectedValue] = useState('option1');

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

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

アプリケーションを起動します。

npm start

コード解説

options 配列は、select 要素で表示されるオプションのリストを定義します。
useState フックを使用して、selectedValue という状態変数を初期値 'option1' で初期化します。
handleChange 関数は、select 要素の値が変更されたときに呼び出されます。
select 要素の value 属性は、selectedValue 状態変数の値に設定されます。
onChange イベントハンドラは、handleChange 関数を呼び出して、selectedValue 状態変数を更新します。
options 配列は、map 関数を使用してループ処理され、各オプション要素がレンダリングされます。
option 要素の key 属性は、一意の識別子を指定するために使用されます。

補足

defaultValue 属性を使用して、初期選択されたオプションを指定することもできます。
disabled 属性を使用して、オプションを無効にすることができます。

関連キーワード

React
JSX
Select
Option
State
handleChange
map
key
value
label
defaultValue
disabled

このチュートリアルは教育目的でのみ提供されており、いかなる種類の保証もありません。

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

function App() {
  const [selectedValue, setSelectedValue] = useState('option1');

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

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

実行方法

このコードを App.js ファイルに保存します。

npm start

選択された <select> オプションで「選択済み」を選択する他の方法

<select defaultValue="option2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

useRef フックを使用して、select 要素の現在の値を追跡できます。

const ref = useRef();

function App() {
  const [selectedValue, setSelectedValue] = useState('option1');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
    ref.current = event.target.value;
  };

  useEffect(() => {
    ref.current.value = selectedValue;
  }, [selectedValue]);

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

カスタムフックを使用する

select 要素の選択状態を管理するカスタムフックを作成できます。

function useSelect(options) {
  const [selectedValue, setSelectedValue] = useState(options[0].value);

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

  return {
    selectedValue,
    handleChange,
  };
}

function App() {
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  const { selectedValue, handleChange } = useSelect(options);

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};