資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 ReactJS 中建立選單項元件？
選單項元件向用戶顯示各種選單選項，使用者可以從選單項元件中選擇任何選項。React Js 中的選單項元件類似於 HTML 中的 <select> 元素，或者可以說它是一個下拉選單。
此外，選單元件包含子選單，用於顯示任何選單項的多個選項。開發者應該使用 <select> HTML 標籤從頭開始實現選單項元件。但是，網際網路上許多可用的 React 庫提供了預先設計的選單項元件。
因此，我們將在下面使用不同的庫來構建選單項元件。
使用 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”變數，並根據其布林值開啟和關閉選單。當用戶點選文字為“開啟選單”的 div 時，它會呼叫 handleOpenMenu() 函式，該函式會開啟選單。
此外，我們在 Menu 元件中添加了三個選單項。每當使用者點選任何選單項時，我們都會呼叫 handleClose() 函式，該函式會將 open 變數的值設定為 false 並關閉選單。
#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 元件的 prop 傳遞。
我們在 Menu 元件中添加了多個 MenuItems 元件，其中包含各種值和 HTML 文字。此外，每當使用者點選任何元件時，它都會呼叫 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 庫元件來建立選單。我們還使用了子選單元件在選單中建立子選單。此外，使用者可以觀察我們如何透過將值作為 prop 傳遞來為子選單新增標籤。
在輸出中，使用者可以觀察到他們可以為“語言”和“框架”標籤開啟巢狀的子選單。
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”變數中。
7K+ 次瀏覽
