如何在react的Material-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: ""
}

现在预期的输出应该是下拉列表，应该显示“ please select value”，但是目前显示

Answer 1

由于 React 引入了React-Hooks，你只需要将 React.useState() 中的默认值作为 React.useState(10) 传递。

export default function CustomizedSelects() {
  const classes = useStyles();
  const [age, setAge] = React.useState(10);// <--------------(Like this).
  const handleChange = event => {
    setAge(event.target.value);
  };
  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.margin}>
        <Select
          value={age}
          className={classes.inner}
          onChange={handleChange}
          input={<BootstrapInput name="currency" id="currency-customized-select" />}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

Answer 2

你可以只通过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>

Answer 3

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

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

Answer 4

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel id="uni">UNI</InputLabel>
  <Select
    key={value}
    defaultValue={value}
    labelId="uni"
    id="uni"
    name="uni"
    onBlur={onChange}
    label="uni"
  >
    {unis.map((u, i) => (
      <MenuItem value={u.value} key={i}>
        {u.label}
      </MenuItem>
    ))}
  </Select>
</FormControl>;