Как добавить опцию отключения или вариант по умолчанию в поле выбора?

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 / демки / выбирает /

Answer 1

используйте value="" для первого варианта выбора материала.

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

Answer 2

https://material -ui.com / демки / выбирает / # выбирает Это то, что вы ищете пример приведен в документации к материалу

Answer 3

Вы можете реализовать это с помощью

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

для стандартного выбора материала и <option value="" />, если вы используете «нативный» выбор материала. Дополнительно вы можете добавить disabled prop.

Пример Codesandbox разветвлен из материалов-документов