![](/img/trans.png)
[英]Styling a Formik Multi-Select component to look like a Material-UI select
[英]How to disable some options in “Select” component of Material-UI like in “Autocomplete”?
有什么方法可以禁用Select
组件中的某些选项,例如Autocomplete
PS:选项在数组中
<FormControl variant="outlined">
<InputLabel>States</InputLabel>
<Select native
defaultValue=""
// value={value}
onChange={inputEvent}
label="States"
>
{fetchedStates.map((states, i) => (
<option key={states + i} value={states}>
{states}
</option>
))}
</Select>
</FormControl>
对Select
执行此操作的方法是将disabled
属性添加到MenuItem
(在下面的示例中显示为“Twenty” MenuItem
)。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = event => {
setAge(event.target.value);
};
return (
<div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Age"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem disabled value={20}>
Twenty
</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
对于本机Select
,您可以使用disabled
属性来代替<option>
:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = event => {
setAge(event.target.value);
};
return (
<div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Age"
native
>
<option aria-label="None" value="" />
<option value={10}>Ten</option>
<option disabled value={20}>
Twenty
</option>
<option value={30}>Thirty</option>
</Select>
</FormControl>
</div>
);
}
如果选项在数组中,您只需要通过某种方式来确定应该禁用哪些选项。 下面的示例显示了执行此操作的一种方法,其中选项数据包含是否应禁用该选项。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
const options = [
{ value: 10, label: "Ten" },
{ value: 20, label: "Twenty", disabled: true },
{ value: 30, label: "Thirty" }
];
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = event => {
setAge(event.target.value);
};
return (
<div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Age"
native
>
<option aria-label="None" value="" />
{options.map(option => (
<option value={option.value} disabled={option.disabled}>
{option.label}
</option>
))}
</Select>
</FormControl>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.