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

Question

我正在使用与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/

Answer 1

您可以使用

来实现它

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

对于标准材料选择，如果使用的是“本机”材料，请使用<option value="" />。 另外，您可以添加disabled个道具。

Codesandbox example forked from material-ui docs

Answer 2

将value=""用于材料选择中的第一个选项。

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

Answer 3

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