ReactとMaterial-UI、TypeScriptを使用したメニューの表示方法

目次

ReactとMaterial-UI、TypeScriptを使用したメニューの表示方法

TypeScriptを使用したReactアプリケーションでMaterial-UIを扱う場合、アクション可能なアイテムとアクション不可能なテキスト表示を含むメニューを表示したいと思うことがあります。
ここでは、Material-UIコンポーネントを用いてシンプルなメニューを実装する方法を説明します。

前提条件

始める前に、以下のものがインストールされていることを確認してください: - Node.js - npmやyarnのようなパッケージマネージャー - Material-UI coreとicons

Material-UIをインストールするには、次のコマンドを実行します:

npm install @mui/material @emotion/react @emotion/styled

または

yarn add @mui/material @emotion/react @emotion/styled

メニューコンポーネントの実装

以下のコードは、SimpleMenu コンポーネントを定義し、ボタンとメニューの状態管理を行い、Material-UIの Menu コンポーネントとその中の MenuItem をレンダリングする方法を示しています。

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

const SimpleMenu: React.FC = () => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem disabled>Display Text</MenuItem>
        <MenuItem onClick={handleClose}>Clickable Item</MenuItem>
        <MenuItem onClick={handleClose}>Another Action</MenuItem>
      </Menu>
    </div>
  );
};

export default SimpleMenu;

このコードスニペットでは、最初の MenuItem に disabled 属性が付いており、ユーザーがクリックできないテキスト項目として機能しています。
これにより、メニュー内で文言のみを表示することができます。

まとめ

この記事では、React、Material-UI、TypeScriptを組み合わせて、アクション可能な項目とアクション不可能なテキスト表示を含むメニューを実装する基本的な方法を紹介しました。
この実装を通じて、より複雑なメニュー構造を作成する際の出発点となるでしょう。