reactjs - 如何在React中的Material-UI选择框中设置默认值？

Question

我正在使用Select box来自 Material 用户界面

我想显示默认选择的“选择值”选项，但之后用户无法选择此选项。

<FormControl required className={classes.formControl}>
  <InputLabel htmlFor="circle">Circle</InputLabel>
    <Select
      value={circle}
      onChange={event => handleInput(event, "circle")}
      input={<Input name="circle" id="circle" />}
    >
      <MenuItem value="" disabled>
        <em>select the value</em>
      </MenuItem>

      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  <FormHelperText>Some important helper text</FormHelperText>
</FormControl>

沙箱上的当前代码:https://codesandbox.io/s/xoylmlj1qp

我想做这样的:https://jsfiddle.net/wc1mxdto/

---

更新

我将状态20更改为圆圈中的空白字符串

form: {
  searchValue: "",
  circle: '',
  searchCriteria: ""
}

现在预期的输出应该是下拉列表应该显示“请选择值”，但目前它显示这个

Answer 1

您只需将 displayEmpty 传递到 select

<Select
    id="demo-simple-select-outlined"
    displayEmpty
    value={select}
    onChange={handleChange}
>

并定义menuItem，例如

<MenuItem value=""><Put any default Value which you want to show></MenuItem>