資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在Material UI中處理多選？
Material UI是一個常用的React UI框架，它提供了一個強大的Select元件，允許使用者從下拉選單中進行選擇。在某些情況下，您可能需要能夠從下拉選單中選擇多個專案。與單選類似，您可以透過訪問onChange回撥中的event.target.value來檢索值，它將始終以陣列格式顯示。
在這篇文章中，我們將探討如何使用Material UI管理選項。Select元件透過啟用“multiple”屬性來支援多選。
處理多選專案的步驟
以下是使用Select元件的各種屬性的步驟：
步驟1：建立React應用程式。安裝MUI
首先開啟您的終端並執行命令來建立一個新的React應用程式專案。
npx create react app selectproject
專案建立後，執行以下命令導航到其目錄：
cd selectproject
現在使用此命令安裝Material UI：
npm install @mui/material @emotion/react @emotion/styled
步驟2：在Select中匯入和處理多選
為了處理多選，我們將使用“multiple”屬性：
<Select
multiple
value={state}
onChange={handleMultiple}>
{language.map((lang) => (
<MenuItem key={lang} value={lang}>
…
</MenuItem>
))}
</Select>
Select API
<Select> - 此API用於新增Select元件，以便從Material UI中的選項列表中選擇資料。
屬性
autoWidth - 此屬性用於設定寬度。
children - 此屬性定義選單項的選項。
classes - 此屬性用於自定義或向元素新增樣式。
defaultOpen - 此屬性預設開啟元件。
defaultValue - 此屬性定義預設值。
displayEmpty - 此屬性用於即使未選擇任何專案也顯示值。
IconComponent - 此屬性用於顯示箭頭圖示。
id - 此屬性用於定義元素的ID。
input - 此屬性新增一個輸入欄位。
inputProps - 此屬性定義輸入欄位的屬性。
label - 此屬性標記輸入欄位。
labelId - 此屬性向與select關聯的標籤新增ID。
MenuProps - 此屬性定義選單的其他屬性。
multiple - 此屬性支援多選。
native - 此屬性新增一個原生Select。
onChange - 此屬性在輸入更改時觸發回撥函式。
onClose - 此屬性關閉select元件。
onOpen - 此屬性開啟select元件。
open - 此屬性顯示Select元件。
renderValue - 此屬性呈現選定的值。
sx - 可以使用sx屬性新增Material UI元件的自定義樣式。
value - 此屬性用於指定輸入值。
variant - 此屬性確定選擇的選項。
示例
在這個示例中，我們使用了select元件來處理多選。為了處理多選，我們使用了“multiple”屬性。在這裡，當用戶從給定的選項中選擇任何選項時，“multiple”屬性將允許選擇一個或多個選擇。
import React from "react";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import { Box } from "@mui/material";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
const language = ["Java", "Python", "C++", "JavaScript", "SQL"];
const App = () => {
const [state, setState] = useState([]);
const handleMultiple = (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 }}>
<InputLabel id="select" label="Lang">
Select
</InputLabel>
<Select
multiple
value={state}
onChange={handleMultiple}>
{language.map((lang) => (
<MenuItem key={lang} value={lang}>
{lang}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在這個示例中，我們在select元件中使用了複選框來處理多選。為了處理多選，我們使用了“multiple”屬性。在這裡，使用複選框輸入使其更具吸引力，當用戶從給定的選項中選擇任何選項時，“multiple”屬性將允許選擇一個或多個選擇。
import React from "react";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import { Box, Checkbox, ListItemText } from "@mui/material";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
const language = ["Java", "Python", "C++", "JavaScript", "SQL"];
const App = () => {
const [state, setState] = useState([]);
const handleMultiple = (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 }}>
<InputLabel id="select" label="Lang">
Select
</InputLabel>
<Select
multiple
value={state}
onChange={handleMultiple}
renderValue={(selected) => selected.join(', ')}>
{language.map((lang) => (
<MenuItem key={lang} value={lang}>
<Checkbox checked={language.indexOf(lang) > -1} />
<ListItemText primary={lang} />
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在這個例子中，我們使用了元件來管理多選。為了滿足多選的情況，我們使用了“multiple”屬性。在這種情況下，當用戶選擇一個選項時，select元件會渲染該屬性，顯示一個標籤。
import React from "react";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import { Box, Chip } from "@mui/material";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
const language = ["Java", "Python", "C++", "JavaScript", "SQL"];
const App = () => {
const [state, setState] = useState([]);
const handleMultiple = (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 }}
>
<InputLabel id="select" label="Lang">
Select
</InputLabel>
<Select
multiple
value={state}
onChange={handleMultiple}
renderValue={(selLang) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selLang.map((value) => (
<Chip key={value} color="info" label={value} />
))}
</Box>
)}
>
{language.map((lang) => (
<MenuItem key={lang} value={lang}>
{lang}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在這個例子中，我們使用了元素來管理多選。為了啟用多選，我們包含了multiple屬性。原生select元素顯示一個選項列表，使用者可以從中選擇他們的選項。
import React from "react";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import { Box, Chip } from "@mui/material";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
const language = ["Java", "Python", "C++", "JavaScript", "SQL"];
const App = () => {
const [state, setState] = useState([]);
const handleMultiple = (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 }}
>
<InputLabel id="select" label="Lang">
Select
</InputLabel>
<Select
multiple
native
value={state}
onChange={handleMultiple}
renderValue={(selLang) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selLang.map((value) => (
<Chip key={value} color="info" label={value} />
))}
</Box>
)}
>
{language.map((lang) => (
<option key={lang} value={lang}>
{lang}
</option>
))}
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
結論
能夠在Material UI中處理選項是一個有價值的功能，它允許使用者從下拉選單中進行多個選擇。透過利用value屬性並使用狀態有效地管理所選選項，您可以輕鬆地在您的React應用程式中使用多選。此外，您可以透過設定預設選擇、限制選擇數量或根據需要清除選擇來靈活地自定義其行為。
瀏覽量：1000+
