极客笔记如何在ReactJS中创建菜单项组件
菜单项组件向用户显示各种菜单选项，用户可以从菜单项组件中选择任意选项。React Js中的菜单项组件类似于HTML中的<select>元素，或者可以说它是一个下拉菜单。
此外，菜单组件包含一个子菜单，用于显示任何菜单项的多个选项。开发人员应该使用<select> HTML标签从头开始实现菜单项组件。然而，许多React库在互联网上提供预设计的菜单项组件。
因此，我们将使用不同的库来构建下面的菜单项组件。
使用Material UI库创建菜单项组件
用户可以在安装Material UI库后使用以下命令在应用程序中使用Material UI的组件。
npm install @mui/material @emotion/react @emotion/styled
语法
用户可以按照以下语法使用Material UI的MenuItem和Menu组件。
<Menu onClose={handleCloseMenu} >
<MenuItem> Item 1</MenuItem>
<MenuItem> Item 2</MenuItem>
<MenuItem> Item 3</MenuItem>
</Menu>
在上面的语法中，我们将MenuItem组件封装在Menu组件中。
示例1
在下面的示例中，我们从Material UI库中导入了Menu和MenuItem组件。此外，我们创建了一个名为‘open’的变量，并根据其布尔值来打开和关闭菜单。当用户点击带有文本“open menu”的div时，它会调用handleOpenMenu()函数来打开菜单。
此外，我们在Menu组件中添加了三个菜单项。每当用户点击任何菜单项时，我们会调用handleClose()函数，该函数将false值设置给open变量，并关闭菜单。
#App.js
import * as React from "react";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
export default function App() {
const [selectedElement, setselectedElement] = React.useState(null);
const [open, setOpen] = React.useState(false);
function handleOpenMenu() {
setOpen(true);
}
function handleCloseMenu(event) {
setOpen(false);
setselectedElement(event.target);
}
return (
<div>
<h2>
{" "}
Creating the menu component using the <i> Material UI </i> library.{" "}
</h2>
<div
style={{
height: "2rem",
padding: "5px 10px",
backgroundColor: "grey",
width: "7rem",
margin: "10px 10px 30px 10px",
fontSize: "1.2rem",
color: "white",
borderRadius: "12px",
cursor: "pointer",
}}
onClick={handleOpenMenu}
>
Open Menu
</div>
<Menu
id="basic-menu"
selectedElement={selectedElement}
open={open}
onClose={handleCloseMenu}
>
<MenuItem onClick={handleCloseMenu}> Item 1 </MenuItem>
<MenuItem onClick={handleCloseMenu}> Item 2 </MenuItem>
<MenuItem onClick={handleCloseMenu}> Item 3 </MenuItem>
</Menu>
</div>
);
}
输出
使用szhsin React库创建菜单项组件
szhsin是一个React库；用户可以在应用程序中使用以下命令进行安装。
npm install @szhsin/react-menu
szhsin库包含各种类型的菜单组件，例如具有单选按钮、复选框等的菜单。在这里，我们将看到szhsin库的Menu组件的一些示例。
语法
用户可以按照以下语法使用szhsin库在React JS中创建菜单项。
<Menu menuButton={<MenuButton>Open menu</MenuButton>} >
<MenuItem value="Item 1" onClick={handleChange}>
Menu item 1
</MenuItem>
<SubMenu label="Languages">
// menu items
</SubMenu>
</Menu>
在上述语法中，我们在Menu组件中添加了MenuItem组件。而且，我们在MenuItem组件上添加了一个onClick事件。此外，我们还使用了SubMenu组件来创建一个子菜单。
示例2
在下面的示例中，我们从szhsin库导入了Menu、MenuItem和MenuButton组件。在那之后，我们使用Menu组件创建了菜单。此外，我们将MenuButton作为Menu组件的一个属性传递进去。
我们在Menu组件中添加了多个具有不同值和HTML文本的MenuItems组件。而且，每当用户点击任何组件时，会调用handleClicked()函数，将点击元素的值设置为“selected”变量的值。
#App.js
import { Menu, MenuItem, MenuButton } from "@szhsin/react-menu";
import "@szhsin/react-menu/dist/index.css";
import "@szhsin/react-menu/dist/transitions/slide.css";
import { useState } from "react";
export default function App() {
const [selected, changeSelected] = useState(null);
function handleClicked(event) {
//changing the selected value
changeSelected(event.value);
}
return (
<div>
<h2>
{" "}
Creating the menu component using the <i> Szhsin </i> library
components.{" "}
</h2>
<Menu menuButton = {<MenuButton> Open menu </MenuButton>} transition>
<MenuItem value = "Item 1" onClick = {handleClicked}>
Menu item 1
</MenuItem>
<MenuItem value = "Item 2" onClick = {handleClicked}>
Menu Item 2
</MenuItem>
<MenuItem value = "Item 3" onClick = {handleClicked}>
Menu Item 3
</MenuItem>
<MenuItem value = "Item 4" onClick = {handleClicked}>
Menu Item 4
</MenuItem>
</Menu>
<div> Selected item from the menu component is {selected}.</div>
</div>
);
}
输出
示例3（创建子菜单）
在下面的示例中，我们还使用了szhsin库组件来创建菜单。我们还使用了子菜单组件来创建菜单内的子菜单。此外，用户还可以观察到我们如何通过将值作为属性传递来为子菜单添加标签。
在输出中，用户可以观察到他们可以打开嵌套的‘languages’和‘frameworks’标签的子菜单。
import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
import "@szhsin/react-menu/dist/index.css";
import "@szhsin/react-menu/dist/transitions/slide.css";
import { useState } from "react";
export default function App() {
const [selected, changeSelected] = useState(null);
function handleChange(event) {
changeSelected(event.value);
}
return (
<div>
<h2>
{" "}
Creating the menu component using the <i> Szhsin </i> library
components.{" "}
</h2>
<Menu menuButton = {<MenuButton> Open menu </MenuButton>} transition>
<MenuItem value = "Item 1" onClick = {handleChange}>
Menu item 1
</MenuItem>
<SubMenu label = "Languages">
<MenuItem value = "reactjs" onClick = {handleChange}>
reactjs
</MenuItem>
<MenuItem value = "JavaScript" onClick = {handleChange}>
JavaScript
</MenuItem>
<SubMenu label = "FrameWorks">
<MenuItem value = "React JS" onClick = {handleChange}>
React Js
</MenuItem>
<MenuItem value = "Django" onClick = {handleChange}>
Django
</MenuItem>
<MenuItem value = "Svelte" onClick = {handleChange}>
Svelt
</MenuItem>
</SubMenu>
</SubMenu>
</Menu>
<div> Selected item from the menu component is {selected}. </div>
</div>
);
}
输出
本教程教会我们在从不同库中导入之后，如何在React JS中使用菜单项组件。同时，我们学会了如何在每个示例中自定义菜单组件。此外，我们将选择的菜单项的值存储在每个示例中的“selected”变量中。