資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在Material UI中使用Select Props？
本文將介紹Material UI中功能的使用。“Select”元件是Material UI的一個元素，允許使用者從選單中選擇選項。為了自定義Select元件的行為和外觀，可以使用各種props。
Select API
<Select> − 此API用於新增Select元件，以便從Material UI中的選項列表中選擇資料。
Props
autoWidth − 此屬性用於設定寬度。
children − 此屬性定義選單項的選項。
classes − 此屬性用於自定義或向元素新增樣式。
defaultOpen − 此屬性預設開啟元件。
defaultValue − 此屬性定義預設值。
displayEmpty − 此屬性用於即使未選擇任何專案也顯示值。
IconComponent − 此屬性用於顯示箭頭圖示。
id − 此屬性用於定義元素的ID。
input − 此屬性新增一個輸入欄位。
inputProps − 此屬性定義輸入欄位的props。
label − 此屬性標記輸入欄位。
labelId − 此屬性向與select關聯的標籤新增ID。
MenuProps − 此屬性定義選單的其他props。
multiple − 此prop支援多選。
native − 此屬性新增一個原生Select。
onChange − 此prop在輸入更改時觸發回撥函式。
onClose − 此prop關閉select元件。
onOpen − 此prop開啟select元件。
open − 此prop顯示Select元件。
renderValue − 此prop呈現選定的值。
sx − 可以使用sx prop新增Material UI元件的自定義樣式。
value − 此屬性用於指定輸入值。
variant − 此屬性確定選擇的選項。
使用Props的步驟
以下是將各種props與Select元件一起使用的步驟：
步驟1：建立一個React應用程式。安裝MUI
首先開啟您的終端並執行命令以建立一個新的React應用程式專案。
npx create react app selectproject
專案建立後，執行以下命令導航到其目錄：
cd selectproject
現在使用此命令安裝Material UI：
npm install @mui/material @emotion/react @emotion/styled
步驟2：在Select中匯入和使用props
以下是如何在select中使用props的示例。
import { Select } from '@mui/material'
<Select readOnly value={state} onChange={handleState} label="Select">
<Dropdown>
<Option>Option 1</Option>
<Option>Option 2</Option>
...
</Dropdown>
示例
在此示例中，我們使用了select元件的variant prop。
import React from "react";
import { Box, FormControl, InputLabel } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useState } from "react";
const App = () => {
const [state, setState] = useState("");
const handleState = (e) => {
setState(e.target.value);
};
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="select">Select</InputLabel>
<Select value={state} onChange={handleState} label="Select">
<MenuItem value={10}>Java</MenuItem>
<MenuItem value={20}>Python</MenuItem>
</Select>
</FormControl>
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="select">Select</InputLabel>
<Select
id="select"
value={state}
onChange={handleState}
>
<MenuItem value={10}>Java</MenuItem>
<MenuItem value={20}>Python</MenuItem>
</Select>
</FormControl>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="select">Select</InputLabel>
<Select
id="select"
value={state}
onChange={handleState}
>
<MenuItem value={10}>Java</MenuItem>
<MenuItem value={20}>Python</MenuItem>
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們使用了select元件的label prop。
import React from "react";
import { Box, FormControl, InputLabel } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useState } from "react";
const App = () => {
const [state, setState] = useState("");
const handleState = (e) => {
setState(e.target.value);
};
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="select" label="Lang">Language</InputLabel>
<Select value={state} onChange={handleState} label="Lang">
<MenuItem value={10}>Java</MenuItem>
<MenuItem value={20}>Python</MenuItem>
</Select>
</FormControl>
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="select">Language</InputLabel>
<Select
id="select"
value={state}
onChange={handleState}
label="Select"
>
<MenuItem value={10}>Java</MenuItem>
<MenuItem value={20}>Python</MenuItem>
</Select>
</FormControl>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="select">Language</InputLabel>
<Select
id="select"
value={state}
onChange={handleState}
label="Select"
>
<MenuItem value={10}>Java</MenuItem>
<MenuItem value={20}>Python</MenuItem>
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們使用了select元件的size prop。
import React from "react";
import { Box, FormControl, InputLabel } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useState } from "react";
const App = () => {
const [state, setState] = useState("");
const handleState = (e) => {
setState(e.target.value);
};
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }} size="small">
<InputLabel id="select" label="Lang">Select</InputLabel>
<Select autoWidth value={state} onChange={handleState} label="Lang">
<MenuItem value={10}>Java for Backend</MenuItem>
<MenuItem value={20}>C++ for CP</MenuItem>
<MenuItem value={30}>JavaScript for web</MenuItem>
<MenuItem value={40}>Python for Data</MenuItem>
</Select>
</FormControl>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }} size="medium">
<InputLabel id="select" label="Lang">Select</InputLabel>
<Select value={state} onChange={handleState} label="Lang">
<MenuItem value={10}>Java for Backend</MenuItem>
<MenuItem value={20}>C++ for CP</MenuItem>
<MenuItem value={30}>JavaScript for web</MenuItem>
<MenuItem value={40}>Python for Data</MenuItem>
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們使用了select元件的disabled和readOnly props。
import React from "react";
import { Box, FormControl, InputLabel } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useState } from "react";
const App = () => {
const [state, setState] = useState("");
const handleState = (e) => {
setState(e.target.value);
};
return (
<div>
<Box sx={{ p: 10 }}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }} size="small">
<InputLabel id="select" label="Lang">Select</InputLabel>
<Select readOnly value={state} onChange={handleState} label="Lang">
<MenuItem value={10}>Java for Backend</MenuItem>
<MenuItem value={20}>C++ for CP</MenuItem>
<MenuItem value={30}>JavaScript for web</MenuItem>
<MenuItem value={40}>Python for Data</MenuItem>
</Select>
</FormControl>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }} size="medium">
<InputLabel id="select" label="Lang">Select</InputLabel>
<Select disabled value={state} onChange={handleState} label="Lang">
<MenuItem value={10}>Java for Backend</MenuItem>
<MenuItem value={20}>C++ for CP</MenuItem>
<MenuItem value={30}>JavaScript for web</MenuItem>
<MenuItem value={40}>Python for Data</MenuItem>
</Select>
</FormControl>
</Box>
</div>
);
};
export default App;
輸出
更新於：2023年11月1日
461 次瀏覽
廣告