【React入門】選択ボックスで選択されたデータを取得する方法を解説！

※このサイトの記事内では広告を掲載している場合があります。

今回は、Reactでinputやformで入力されたテキストの情報を取得する方法を解説します。

Reactで入力値を取得するには、コンポーネントの状態（state）を使用します。

考え方は、要素が変更されたタイミングでstateの更新を行い、必要なタイミングで対応するstateを取得するといった流れになります。

inputタグの値を取得する方法は下記の記事で解説していますので参考にしてください。

参考：【React入門】formやinputタグのテキストを取得する方法を解説！

なお、本記事の内容は書籍「これからはじめるReact実践入門」を参考にしています。

リンク

選択ボックス（単一選択）の実装

まずは、単一選択ができる選択ボックスを実装します。

選択ボックスもフォームなどと同様にuseStateフックを使用して、選択された値を管理します。

以下はサンプルコードです。

import { useState } from 'react';

root.render(
  <SingleSelect />
);

export default function SingleSelect() {
  const [form, setForm] = useState({
    fruits: 'apple'
  });

  const handleForm = e => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  const show = () => {
    alert(`選択した果物：${form.fruits}`);
  };

  return (
    <form>
      <label htmlFor="fruits">好きな動物：</label>
      <select id="fruits" name="fruits"
        value={form.fruits}
        onChange={handleForm}>
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
        <option value="cherry">チェリー</option>
        <option value="durian">ドリアン</option>
        <option value="orange">オレンジ</option>
      </select>
      <button type="button" onClick={show}>送信</button>
    </form>
  );
}

「handleForm 」では、「e.target.value」で選択された値を取得し、選択された項目で更新します。

onClickイベントハンドラを定義し、ボタンが押下されたタイミングで、更新された値の取得を行います。

選択ボックスの選択肢は、selectタグ内にoptionタグを設定することで複数の項目を定義できます。

なお、「handleForm」関数は以下のように各要素ごとで記述することも可能ですが、記述力は多くなります。


  const handleForm = e => {
    setForm({
      fruits: form.fruits,
      [e.target.name]: e.target.value
    });
  };

以下のようにシンプルに記述することも可能ですので、お好みで書いてみてください、


import { useState } from 'react';

root.render(
  <SingleSelect />
);

export default function SingleSelect() {
  const [fruits, setForm] = useState('apple')
  const handleForm = e => setForm(e.target.value)

  const show = () => {
    alert(`選択した果物：${fruits}`);
  };

  return (
    <form>
      <label htmlFor="fruits">好きな動物：</label>
      <select id="fruits" name="fruits"
        value={fruits}
        onChange={handleForm}>
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
        <option value="cherry">チェリー</option>
        <option value="durian">ドリアン</option>
        <option value="orange">オレンジ</option>
      </select>
      <button type="button" onClick={show}>送信</button>
    </form>
  );
}

選択ボックス（複数選択）の実装

次に、複数選択ができる選択ボックスの実装です。


import { useState } from 'react';

root.render(
  <MultiSelect />
);

export default function MultiSelect() {
  const [form, setForm] = useState({
    fruits: ['apple', 'banana']
  });

  const handleFormList = e => {
    const data = [];
    const opts = e.target.options;
    for (const opt of opts) {
      if (opt.selected) {
        data.push(opt.value);
      }
    }
    setForm({
      ...form,
      [e.target.name]: data
    });
  };

  const show = () => {
    console.log(`選択した果物：${form.fruits}`);
  };

  return (
    <form>
      <label htmlFor="fruits">好きな動物：</label><br />
      <select id="fruits" name="fruits"
        value={form.fruits}
        size="4" multiple={true}
        onChange={handleFormList}>
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
        <option value="cherry">チェリー</option>
        <option value="durian">ドリアン</option>
        <option value="orange">オレンジ</option>
      </select>
      <p />
      <button type="button" onClick={show}>送信</button>
    </form>
  );
}

useStateフックを使用して、選択された値の配列を管理します。初期値は配列で指定し、選択ボックスのidに対応させます。

selectタグのmultiple属性をtrueに設定します。これにより、複数選択が可能になります。

value属性に状態変数を設定します。これにより、選択された値が状態と同期されます。

onChangeイベントハンドラを定義し、選択が変更されたときに状態を更新します。

このコードを使うと、複数選択が可能な選択ボックスの選択状態をReactの状態として管理でき、選択された値を動的に表示することができます。