【TypeScript】ReactでMaterialUIを使ってセレクトボックスを表示する方法ご紹介。

今回の記事はTypeScriptベースのReactでMaterialUIを利用してセレクトボックスを表示する方法をご紹介します。初心者にも分かりやすいように記載するので是非参考にしてみてください。

TypeScriptのReactプロジェクト作成
ReactにMaterialUIをインストール
MaterialUIのセレクトボックス表示

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

次にMaterialUIをインストールします。

ReactにMaterialUIをインストール

一旦ローカルサーバを止めます。「Ctrl + C」

npm install @mui/material @mui/styles @emotion/react @emotion/styled --save

上記コマンドでMaterialUIをインストールします。これでインストールは完了です。

MaterialUIのセレクトボックス表示

ではいよいよ本題のセレクトボックス表示を行っていきましょう。

まずは「App.tsx」を修正します。

import React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';

function BasicSelect() {
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

const App: React.VFC = () => {
  return (
    <div>
      <BasicSelect />
    </div>
  );
}

export default App;

これでセレクトボックスが表示できるようになっています。

ほかにもこのセレクトボックスの中身を自身で設定した配列などを指定する方法もあるのでそちらも是非参考にしてみて下さい。

「【TypeScript】ReactでMaterialUIのセレクトボックスに配列値を表示する方法ご紹介。」

公式ドキュメントでも確認はできます。