【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>
  );
}

import { useState } from 'react';

root.render(

);

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}>

</select>

</form>

);

}

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

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

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

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


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

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(

);

export default function SingleSelect() {

const [fruits, setForm] = useState('apple')

const handleForm = e => setForm(e.target.value)

const show = () => {

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

};