如何在选择框中添加禁用选项或默认选项？答案

【问题标题】：How to add disable option or default option in select box?如何在选择框中添加禁用选项或默认选项？
【发布时间】：2019-02-09 08:35:13
【问题描述】：

我正在使用反应材料与select 组件反应。我想添加第一个禁用选项，例如“请选择项目”

这样在html中实现

<select name="tagging">
        <option selected disabled>I'm working</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
</select>

我将如何使用材料 + 反应来实现这一目标

这是我的代码 https://codesandbox.io/s/6836mkjx3

<FormControl className={classes.formControl}>
            <InputLabel htmlFor="searchCriteria">SEARCH CRITERIA *</InputLabel>
            <Select
              value={searchCriteria}
              onChange={event => handleInput(event, "searchCriteria")}
              input={<Input name="searchCriteria" id="searchCriteria" />}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            <FormHelperText>Some important helper text</FormHelperText>
          </FormControl>

这里是材料中的选择示例 https://material-ui.com/demos/selects/

【问题讨论】：

标签： javascript reactjs material-design material-ui

【解决方案1】：

https://material-ui.com/demos/selects/#selects 这就是你要找的示例在材料 ui 文档中给出

【讨论】：

【解决方案2】：

你可以用

来实现

<MenuItem value="">
  <em>None</em>
</MenuItem>

对于标准材料选择和<option value="" />，如果您使用“本机”材料选择。另外你可以添加disabled prop。

Codesandbox example forked from material-ui docs

【讨论】：

【解决方案3】：

使用value="" 作为材料选择的第一个选项。

<MenuItem selected disabled value="">
     <em>None</em>
</MenuItem>

【讨论】：

【解决方案4】：

你需要一个标签

导入：import InputLabel from '@mui/material/InputLabel';

组件：<InputLabel id="demo-simple-select-disabled-label">Select one</InputLabel>

【讨论】：