Material-UIで複数の値を選択する方法

必要なモジュールのインポート: まず、@material-ui/coreからSelectとMenuItemコンポーネントをインポートします。

import React, { useState } from 'react';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

状態の管理: 複数の値を選択するために、選択された値を状態として管理する必要があります。useStateフックを使用して状態を初期化します。

const [selectedValues, setSelectedValues] = useState([]);

レンダリング: Selectコンポーネントを使用して選択肢を表示し、MenuItemコンポーネントを使用して各オプションを作成します。multipleプロパティをtrueに設定して、複数の値の選択を有効にします。

<Select
  multiple
  value={selectedValues}
  onChange={(event) => setSelectedValues(event.target.value)}
>
  <MenuItem value="option1">オプション1</MenuItem>
  <MenuItem value="option2">オプション2</MenuItem>
  <MenuItem value="option3">オプション3</MenuItem>
</Select>

選択された値の取得: 選択された値はselectedValues状態に格納されます。これを必要に応じて処理することができます。

console.log(selectedValues); // 選択された値の表示