資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在Material UI中建立原生下拉選單 (Native Select)?
Material UI是一個React框架，它提供了一個Select元件。這個元件允許使用者從選單中選擇選項。今天我們將探討如何在Material UI中建立原生下拉選單(Native Select)。Material UI中的一個元件是“Native Select”。它在建立具有原生選擇功能的菜單方面發揮著作用，使使用者能夠從各種選項中進行選擇。
Native Select與Select元件有何不同？
Native Select和Select元件有一些區別。Native Select透過渲染原生的HTML <select> 元素，在不同平臺上提供使用者介面。它提供了一個標準的下拉選單和自定義選項，確保了輔助功能的相容性。另一方面，Select元件是由Material UI使用JavaScript和CSS建立的自定義下拉選單。它提供了一個優秀的設計和高度可定製的使用者介面，但是需要額外的工作來確保輔助功能的相容性。
NativeSelect API
<NativeSelect> − 此API用於新增原生選擇元件，以便從Material UI中的選項列表中選擇資料。
建立原生下拉選單的步驟
以下是建立原生選擇元件的步驟：
步驟1：建立React應用。安裝MUI
首先開啟終端並執行命令以建立一個新的React應用專案。
npx create react app selectproject
專案建立完成後，執行以下命令導航到其目錄：
cd selectproject
現在使用此命令安裝Material UI：
npm install @mui/material @emotion/react @emotion/styled
步驟2：匯入依賴項
讓我們首先從Material UI匯入所需的依賴項。
import { NativeSelect } from "@mui/material";
步驟3：建立NativeSelect元件
匯入依賴項後，現在可以使用該元件並使用資料列表在其內渲染選項。
<NativeSelect> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> … </NativeSelect>
使用的屬性
children − “children”屬性允許您包含專門用於子元素的內容列表。在本例中，這些內容顯示為選項。
classes − 透過使用“classes”屬性，我們可以擴充套件Material UI提供的現有樣式。
IconComponent − 要顯示箭頭圖示，請使用“IconComponent”屬性。
input − 要新增一個不基於Material UI Input元件的輸入元素，請使用“input”屬性。
inputProps − 要向選擇元件新增屬性，請使用“inputProps”屬性。
onChange − 此屬性用於在選擇選擇項時觸發回撥函式。
sx − 可以使用sx屬性新增Material UI元件的自定義樣式。
value − 此屬性用於指定輸入值。
variant − 此屬性確定選擇選項。
示例
在這個例子中，我們使用Material UI開發了一個具有原生功能的選擇元件。在這裡，我們渲染NativeSelect元件以及選項輸入元件，以展示一系列選擇。NativeSelect元件與Material UI中的Select元件不同，因為它增強了跨平臺（包括裝置）的使用者體驗。
import React from "react";
import FormControl from "@mui/material/FormControl";
import { Box, InputLabel, NativeSelect } from "@mui/material";
const App = () => {
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl variant="standard" size="large" sx={{ m: 1, minWidth: 120 }}>
<InputLabel variant="standard">
Select
</InputLabel>
<NativeSelect variant="outlined" defaultValue={4}>
<option value="1">Java Language</option>
<option value="2">C++ Language</option>
<option value="3">Python Language</option>
<option value="4">JavaScript Language</option>
<option value="5">SQL Language</option>
<option value="6">Go Language</option>
</NativeSelect>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在這個例子中，我們使用了native屬性在Material UI中建立了一個原生選擇元件。在這裡，我們顯示Select元件以及選項輸入元素，以呈現使用者可以選擇的一系列選項。
import React from "react";
import FormControl from "@mui/material/FormControl";
import { Box, InputLabel, Select } from "@mui/material";
const App = () => {
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl variant="standard" size="large" sx={{ m: 1, minWidth: 120 }}>
<InputLabel variant="standard">
Select
</InputLabel>
<Select multiple native variant="standard" >
<option value="1">Java Language</option>
<option value="2">C++ Language</option>
<option value="3">Python Language</option>
<option value="4">JavaScript Language</option>
<option value="5">SQL Language</option>
<option value="6">Go Language</option>
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在本例中，我們的重點是使用Material UI建立一個原生選擇元件。我們在這裡渲染NativeSelect元件以及選項輸入元素來展示一系列選項。此外，為了有效地顯示資料集列表，我們利用map()函式進行渲染。值得注意的是，與Material UI中的Select元件相比，NativeSelect元件在移動裝置等平臺上提供了更好的使用者體驗。
import React from "react";
import { useState } from "react";
import FormControl from "@mui/material/FormControl";
import { Box, NativeSelect } from "@mui/material";
const language = ["Java", "Python", "C++", "JavaScript", "SQL"];
const App = () => {
const [state, setState] = useState([]);
const handleSelect = (e) => {
const {
target: { value },
} = e;
setState(
typeof value === "string" ? value.split(",") : value
);
};
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl
variant="standard"
size="large"
sx={{ m: 1, minWidth: 120 }}>
<NativeSelect
variant="outlined"
value={state}
onChange={handleSelect}
>
{language.map((lang) => (
<option key={lang} value={lang}>
{lang}
</option>
))}
</NativeSelect>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
結論
在本文中，您學習瞭如何使用Material UI構建Native Select元件。我們討論了設定React專案、匯入依賴項、建立帶有選項的Native Select元件以及最終在應用程式中顯示它的過程。透過遵循這些說明，您可以輕鬆地將具有選擇功能的選單整合到由Material UI驅動的React應用程式中。為了更好地理解如何建立Native Select元件，我們還演示了不同的示例，包括基本原生選擇、允許選擇多個選項等。請隨時根據專案的需要個性化選項和樣式。
458 次瀏覽
