How to set default value in material-UI select box in react?

问题

I am using Select box from material-ui

I want to show "select the value" option by default selected but after that user is not able to select this option.

<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>

Current code on sandbox: https://codesandbox.io/s/xoylmlj1qp

I want to make like this: https://jsfiddle.net/wc1mxdto/

---

Update

I changed the state 20 to blank string in circle

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

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

回答1:

You need to provide correct MenuItem value in state to be matched on render.

Here is the working codesandbox: Default Select Value Material-UI

回答2:

As React introduced React-Hooks, you just need to pass your default value in React.useState() as 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>
  );
}

回答3:

You can just pass the displayEmpty into select

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

and define the menuItem like

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

回答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>;

来源：https://stackoverflow.com/questions/52182673/how-to-set-default-value-in-material-ui-select-box-in-react