Css 如何禁用“中的某些选项”；选择"；物料UI的组件，如“中”；自动完成；？

是否有任何方法可以禁用

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>

州
{fetchedStates.map（（states，i）=>(
{国家}
))}

---

选择

的方法是将
disabled
属性添加到
菜单项
（在下面的示例中为“二十”
菜单项
显示）


如果选项在一个数组中，您只需要有一些方法来确定哪些选项应该被禁用。下面的示例显示了一种方法，其中选项数据包含是否应禁用该选项

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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入选择；
const useStyles=makeStyles（主题=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120
},
选择空：{
marginTop：主题。间距（2）
}
}));
常量选项=[
{值：10，标签：“十”}，
{值：20，标签：“20”，禁用：true}，
{值：30，标签：“三十”}
];
导出默认函数SimpleSelect（）{
const classes=useStyles（）；
const[age，setAge]=React.useState（“”）；
const handleChange=事件=>{
设置（事件、目标、值）；
};
返回(
年龄
{options.map（option=>(
{option.label}
))}
);
}

您已经打开了文档，只需查看实施情况即可。答案已经在您提供的图片中。您必须添加getOptionDisabled。我的选项在一个数组中，因此没有给定的方法来禁用
select
中的特定选项。您是否使用
native
select
？在您的示例中，您没有显示
native
属性，但是
标记仅作为
native
Select
的子项有效（对于非native，子项应该是
MenuItem
元素）。因此，您可以再次检查吗？rry，我没有添加，但选项是数组？请您再次检查上述问题标记还有一个禁用的属性：@KALITA我添加了更多示例。@RyanCogswell请注意，在
MenuItem
中添加
disabled
并不会将
disabled
属性添加到DOM元素中，从而在测试元素的禁用状态时导致测试失败（
.toBeDisabled（）
）。
MenuItem
上的@nearhuscal将
aria disabled=“true”
以及
Mui disabled
CSS类添加到DOM中。DOM元素是
元素，而
disabled
不是
元素支持的属性。
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>
  );
}