数据结构
网络
关系数据库管理系统 (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 次浏览
广告