React JSXで<select>選択設定

React JSXで選択された<select>オプションを"selected"にする

React JSXでは、<select>要素内のオプションをデフォルトで選択するために、selected属性を使用します。

基本的な使い方

import React from 'react';

function Example() {
  return (
    <select>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut" selected>Coconut</option>
      <option value="mango">Mango</op   tion>
    </select>
  );
}

この例では、"Coconut" オプションがデフォルトで選択されています。selected属性をそのオプションに直接指定しています。

条件に基づく選択

選択するオプションを条件に基づいて動的に決定したい場合、JavaScriptの変数を使用してselected属性を設定できます。

import React, { useState } from 'react';

function Example() {
  const [selectedFruit, setSelectedFruit] = useState('coconut');

  const handleSelectChange = (event) => {
    setSelectedFruit(event.target.value);
  };

  return (
    <select value={selectedFruit} onChange={handleSelectChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</   option>
      <option value="mango">Mango</option>
    </sele   ct>
  );
}

この例では、selectedFruitという状態変数を使い、選択されたフルーツを管理しています。value属性にselectedFruitを指定し、onChangeイベントハンドラーで選択された値を更新しています。

ポイント

• value属性を使用して<select>要素と<option>要素の値を関連付けます。
• 条件に基づいて選択する場合は、JavaScriptの変数を使用してselected属性を設定します。
• selected属性は、<option>要素に直接適用します。

import React from 'react';

function Example() {
  return (
    <select>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut" selected>Coconut</option>
      <option value="mango">Mango</op   tion>
    </select>
  );
}

import React, { useState } from 'react';

function Example() {
  const [selectedFruit, setSelectedFruit] = useState('coconut');

  const handleSelectChange = (event) => {
    setSelectedFruit(event.target.value);
  };

  return (
    <select value={selectedFruit} onChange={handleSelectChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</   option>
      <option value="mango">Mango</option>
    </sele   ct>
  );
}

Controlled Component

この方法は、Reactのコンポーネント内で選択された値の状態を管理します。

import React, { useState } from 'react';

function Example() {
  const [selectedFruit, setSelectedFruit] = useState('coconut');

  const handleSelectChange = (event) => {
    setSelectedFruit(event.target.value);
  };

  return (
    <select value={selectedFruit} onChange={handleSelectChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</   option>
      <option value="mango">Mango</option>
    </sele   ct>
  );
}

この方法は、DOMのネイティブイベントを使用して選択された値を取得します。

import React, { useRef } from 'react';

function Example() {
  const selectRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const selectedValue = selectRef.current.value;
    console.log(selectedValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <select ref={selectRef}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </sele   ct>
      <button type="submit">Submit</button>
    </form>
  );
}

Third-Party Libraries

Reactコミュニティでは、選択ボックスの操作を簡素化するサードパーティライブラリが多数存在します。例えば、react-selectやdownshiftなどが有名です。

react-select

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'grapefruit', label: 'Grapefruit' },
  { value: 'lime', label: 'Lime' },
  { value: 'coconut', label: 'Coconut' },
  { value: 'mango', label: 'Mang   o' }
];

function Example() {
  const [selectedOption, setSelectedOption] = useState(options[2]);

  return (
    <Select
      options={options}
      value={selectedOption}
      onChange={setSelectedOption}
    />
  );
}

選択方法の比較