スポンサーリンク

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

TypeScript
スポンサーリンク

今回の記事はTypeScriptベースのReactで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のセレクトボックスに配列値を表示する方法ご紹介。

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

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました