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

我在用选择框 https://material-ui.com/demos/selects/来自材料用户界面

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

<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://codesandbox.io/s/xoylmlj1qp

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

Update

我改变了状态20到圆圈中的空白字符串

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

now expected output should be dropdown should show "please select value" but currently it showing this

您只需通过displayEmpty进入选择

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

并定义 menuItem 像

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