Как установить значение по умолчанию в поле выбора материала-интерфейса при реагировании?

Question

Я использую Выберите поле из материала-интерфейса

Я хочу показать опцию «выбрать значение» по умолчанию, но после этого пользователь не может выбрать эту опцию.

<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

Поскольку 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

Необходимо указать правильное значение MenuItem в состоянии, которое будет сопоставлено при рендеринге.

Вот рабочие коды и окно: Значение по умолчанию Выберите значение Material-UI