ふかしぎのReactさんぷるず

Selectの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/04/16
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.5.2 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Select } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Select  = MaterialUI.Select;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Selectの各プロパティの解説

MUIでのSelectの扱い方の説明です。
セレクトボックスを作ります。
HTMLのSELECT要素の子要素のOPTION要素の代わりにMenuItemコンポーネントを使います。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select defaultValue="">
  <MenuItem value="1111">オプション1</MenuItem>
</Select>
, document.getElementById('sample')
);

autoWidth

SelectのautoWidthの使い方の説明です。
選択するドロップダウンリストの幅を決めます。
ブール値でtrueにすると自動的に幅が決められます。
falseにするとSelectと同じ幅になります。
未設定のデフォルトはfalseです。
最低幅はドロップダウンリストの一番長い項目の幅になります。
サンプルの1つ目はtrueにしたのでドロップダウンリストで一番長い文字列の「オプションオプションオプション3」の幅になります。
サンプルの2つ目はfalseなのでSELECTコンポーネントと同じ幅になります。
サンプルの3つ目は未設定なのでfalseです。そしてドロップダウンリストで一番長い文字列の「オプションオプションオプション3」の幅になります。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<div>
<div>
<Select autoWidth={true} sx={{"width":"100%"}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプションオプション2</MenuItem>
  <MenuItem value="3">オプションオプションオプション3</MenuItem>
</Select>
</div>
<div>
<Select autoWidth={false} sx={{"width":"100%"}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプションオプション2</MenuItem>
  <MenuItem value="3">オプションオプションオプション3</MenuItem>
</Select>
</div>
<div>
<Select defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプションオプション2</MenuItem>
  <MenuItem value="3">オプションオプションオプション3</MenuItem>
</Select>
</div>
</div>
, document.getElementById('sample')
);

children

Selectのchildrenの使い方の説明です。
子要素のノードを設定できます。
子要素はMenuItemでなければいけません。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
const TukuttaMenuItem = <MenuItem value="1">オプション1</MenuItem>;
ReactDOM.render(
<Select children={TukuttaMenuItem} defaultValue="" />
, document.getElementById('sample')
);

classes

Selectのclassesの使い方の説明です。
CSSの設定を上書きします。

defaultOpen

SelectのdefaultOpenの使い方の説明です。
最初からドロップダウンリストが表示された状態にします。
管理されていないのでユーザー側がクリックすることで表示・非表示を切り替えられます。
が、スクロールできる画面だとあらぬ場所でドロップダウンリストが表示されてしまうので使用しないほうがいいでしょう
defaultOpenopenは表示画面外での動作を想定していません。スクロールした先にある場合は変な動作になります。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select defaultOpen={true} defaultValue="">
  <MenuItem value="1">デフォルトオープン(defaultOpen)のドロップダウンリストです</MenuItem>
</Select>
, document.getElementById('sample')
);

defaultValue

SelectのdefaultValueの使い方の説明です。
管理されない初期値を設定できます。
サンプルでは2番目の項目が選択された状態になります。
管理されていないのでユーザー側で値が変更できます。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select defaultValue="2" defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

displayEmpty

SelectのdisplayEmptyの使い方の説明です。
値が空の時にその表示名を表示するかの設定です。
ブール値でtrueにすると表示されます。
未設定のデフォルトはfalseです。
サンプルの1つ目はtrueに設定しているので未選択を選ぶと未選択と表示されます。
サンプルの2つ目はfalseに設定しているので未選択を選んでも表示は空白のままです。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<div>
<div>
<Select displayEmpty={true} defaultValue="">
  <MenuItem value="">未選択</MenuItem>
  <MenuItem value="1">オプション1</MenuItem>
</Select>
<div>
</div>
<Select displayEmpty={false} defaultValue="">
  <MenuItem value="">未選択</MenuItem>
  <MenuItem value="1">オプション1</MenuItem>
</Select>
</div>
</div>
, document.getElementById('sample')
);

IconComponent

SelectのIconComponentの使い方の説明です。
省略

id

Selectのidの使い方の説明です。
HTMLのidと一緒なので省略

input

Selectのinputの使い方の説明です。
省略

inputProps

SelectのinputPropsの使い方の説明です。
内部的にはDIV要素で一覧を表示しINPUT要素に値が保存されます。
その内部の非表示INPUT要素の属性を設定できます。
開発ツールで確認するとINPUT要素に付け加えられているのがわかります。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select inputProps={{"data-kokoni":"SetteiSareru"}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
</Select>
, document.getElementById('sample')
);

label

Selectのlabelの使い方の説明です。
フォーカスしたときに左上枠線に表示されるラベルを設定します。
が、フォーカスをあててもCSSのopasityが0のままなので真っ白で表示されません。
あきらめてこのlabel機能は使わずにInputLabelを使用しましょう。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<div>
<Select label="ラベルです" defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
</Select>
</div>
, document.getElementById('sample')
);

labelId

SelectのlabelIdの使い方の説明です。
スクリーンリーダー用のIDを設定します。
SelectのMenuPropsの使い方の説明です。
MenuItemコンポーネントのプロパティを設定できます。
サンプルではオプションのリストを斜め文字にしています。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select MenuProps={{"style":{"fontStyle":"italic"}}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
</Select>
, document.getElementById('sample')
);

multiple

Selectのmultipleの使い方の説明です。
複数選択できる設定です。
ブール値でtrueにすると複数選択可能になります。
未設定のデフォルトはfalseです。
複数選択するので保持する値のvalueやdefaultValueは配列にする必要があります。設定を忘れると
Error: MUI: The `value` prop must be an array when using the `Select` component with `multiple`.
と怒られます。
defaultValue=""ではなくdefaultValue={[]}とする必要があります。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select multiple={true} defaultValue={[]}>
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
  <MenuItem value="3">オプション3</MenuItem>
</Select>
, document.getElementById('sample')
);

native

Selectのnativeの使い方の説明です。
HTMLのSELECTを作成します。
通常のSelectコンポーネントはHTMLのSELECTは作らずにDIVとINPUTで疑似的なセレクトボックスを作っています。
ブール値をtrueにすることにより疑似セレクトボックスではなくHTMLのSELECTを作るようになります。
const Select = MaterialUI.Select;
ReactDOM.render(
<Select native={true} defaultValue="">
  <option value="1" key="1" className="no-autoinit">オプション1</option>
  <option value="2" key="2" className="no-autoinit">オプション2</option>
</Select>
, document.getElementById('sample')
);

onChange

SelectのonChangeの使い方の説明です。
INPUT要素のonChangeと同じです。
星が選択されたときに実行されます。
event.target.valueで値を取得できます。
サンプルではクリックするとアラートウインドを出し値を表示します
onOpen、onChange、onCloseの実行順序はこちらを見てください。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select onChange={(event)=>{alert('変更されました。値は'+event.target.value)}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

onClose

SelectのonCloseの使い方の説明です。
閉じるときに実行されます。
onOpen、onChange、onCloseの実行順序はこちらを見てください。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select onClose={(event)=>{alert('閉じます。')}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

onOpen

SelectのonOpenの使い方の説明です。
開くときに実行されます。
onOpen、onChange、onCloseの実行順序はこちらを見てください。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select onOpen={()=>{alert('開きます。')}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

onOpen、onChange、onCloseの実行順序

onOpen、選択候補の一覧表示、onChangeonClose、選択候補の一覧非表示、Selectコンポーネントの内容変更、の順で処理されます。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select
 onOpen={(event)=>{alert('onOpen。')}}
 onChange={(event)=>{alert('onChange。')}}
 onClose={(event)=>{alert('onClose。')}}
 defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

open

Selectのopenの使い方の説明です。
選択候補の一覧を表示するかの設定です。
ブール値でtrueにすると表示します。
未設定のデフォルトはfalseです。
defaultOpenopenは表示画面外での動作を想定していません。スクロールした先にある場合は変な動作になります。
サンプルは「openをtrueにする」をクリックするとopenにtrueを設定します。
最低限のサンプルなので一度openにしたらそのままになります。F5でリロードしてください。
初期値はfalseになっているので選択欄をクリックしてもドロップダウンリストは表示されません。
一般的にはボタンでtrue/falseの切り替えをします。そしてonOpenでtrueにする処理を、ドロップダウンリストで選択した後のonCloseでfalseになる処理を入れる必要があります。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
const Main = () => {
  const [onOff, setonOff] = React.useState(false);
  return (
    <div>
      <Select open={onOff} defaultValue="">
        <MenuItem value="1">ドロップダウンリスト1</MenuItem>
      </Select>
      <button onClick={()=>setonOff(true)}>openをtrueにする</button>
    </div>
  )
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

renderValue

SelectのrenderValueの使い方の説明です。
選択したものを加工して表示したい場合に使用します。
サンプルは選択した値にレンダーバリューという文字を追加して表示します。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select renderValue={(value)=>{return <div>値は「{value}」レンダーバリュー</div>}} defaultValue="">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

SelectDisplayProps

SelectのSelectDisplayPropsの使い方の説明です。
セレクトボックスのプロパティを設定できます。
サンプルではセレクトボックスを斜め文字にしています。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select SelectDisplayProps={{"style":{"fontStyle":"italic"}}} defaultValue="2">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

sx

Selectのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

value

Selectのvalueの使い方の説明です。
valueに設定した値とMenuItemで作ったドロップダウンリストのvalueで一致したものの表示名が表示されます。
表示したくない場合は空欄にします。
defaultValueと違い管理されているため、ユーザー側から変更はできません。ドロップダウンリストから他の項目を選択しても表示は変わりません。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<Select value="2">
  <MenuItem value="1">オプション1</MenuItem>
  <MenuItem value="2">オプション2</MenuItem>
</Select>
, document.getElementById('sample')
);

variant

Selectのvariantの使い方の説明です。
バリアントで見た目を変えられます。
filled、outlined、standardが使えます。
filledは背景色有りです。outlinedは枠線のみです。standardは下線のみです。
未設定のデフォルトはoutlinedです。
const Select = MaterialUI.Select;
const MenuItem = MaterialUI.MenuItem;
ReactDOM.render(
<div>
<Select variant="filleddefaultValue="1">
  <MenuItem value="1">フィル1</MenuItem>
  <MenuItem value="2">フィル2</MenuItem>
</Select>
<Select variant="outlineddefaultValue="1">
  <MenuItem value="1">アウトライン1</MenuItem>
  <MenuItem value="2">アウトライン2</MenuItem>
</Select>
<Select variant="standarddefaultValue="1">
  <MenuItem value="1">スタンダード1</MenuItem>
  <MenuItem value="2">スタンダード2</MenuItem>
</Select>
</div>
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次