React・TypeScript・Material-UI(MUI)でSelectBoxのComponentを作成する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、React・TypeScript・Material-UI(MUI)でSelectBoxのComponentを作成する方法について解説していきます。

1 Material-UI(MUI)でSelectBoxのComponentを作成する方法
- 1.1 SelectBoxの要件定義とComponent導入イメージ
- 1.2 SelectBox_ComponentのSampleCode
2 Twitterやってます！Follow Me！
3 React関連の書籍
4 プログラミング学習・エンジニア転職関連の情報
5 最近の投稿

Material-UI(MUI)でSelectBoxのComponentを作成する方法

React・TypeScript環境でのSelectBoxのComponent作成に、Material-UI(MUI)のSelectとMenuItem を利用しました。

SelectBoxの要件定義とComponent導入イメージ

今回作成するSelectBoxComponentの要件定義は、次のとおりになります。

SelectBoxの id と options は、必須にする。
option の Data は{ id: number, value: string } の形のListにする。
label と styleの設定はしてもしなくてもOKにする。

Component導入イメージは、次のような感じになります。

SelectBox_ComponentのSampleCode

SelectBox_ComponentのSampleCodeは、次のとおりです。

import { useState } from "react";
import { MenuItem, Select } from "@mui/material";
interface OptionType {
  id: number;
  value: string;
}
type OptionList = OptionType[];
interface StyleObj {
  [key: string]: string;
}
interface PropsType {
  id: string;
  label?: string;
  options: OptionList;
  style?: StyleObj;
}

// MUIのSelectを利用したSelecBox_Component
const SelectBox = (props: PropsType) => {
  const options = props.options;
  // 選択中の SelectBox の Option
  const [selectedOption, setSelectedOption] = useState<OptionType>(options[0]);
  // SelectBoxの変更を検知して、SelectOption を Setする
  const selectChangeCategory = (value: string | undefined) => {
    const findOption = options.find((opt) => opt.value === value);
    if (findOption) {
      setSelectedOption(findOption);
    }
  };

  return (
    <Select
      labelId={props.label ? props.label : ""}
      id={props.id}
      value={selectedOption.value ?? ""}
      onChange={(event) => selectChangeCategory(event.target.value)}
      style={props.style ? props.style : {}}
    >
      {options.map((option) => (
        <MenuItem key={option.id} value={option.value}>
          {option.value}
        </MenuItem>
      ))}
    </Select>
  );
};
export default SelectBox;

親コンポーネントからは、次のようにして、SelectBox_Componentを呼び出すことができます。

{/* SelectBox_Component_Test */}
<div>
  <SelectBox
    id="select_box_1"
    label="test_select_box"
    options={[
      { id: 1, value: "ロボ玉試作1号機" },
      { id: 2, value: "ロボ玉試作2号機" },
      { id: 3, value: "ロボ玉試作3号機" },
    ]}
    style={{
      width: "30%",
      height: "40px",
      margin: "0 auto",
      borderRadius: "10px",
      border: "solid 1px #e4e4e4",
      backgroundColor: "rgba(0, 0, 0, 0.04)",
      fontWeight: "900",
      color: "#707070",
    }}
  />
</div>