如何在反应的材料-UI选择框中设置默认值？

Question

我正在使用来自 material-ui 的 选择框

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

 <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: ""
}

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

原文由 user944513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在状态中提供正确的 MenuItem 值以在渲染时匹配。

这是工作代码和框： 默认选择值 Material-UI

原文由 Sakhi Mansoor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将 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>

原文由 Alok Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议