Comment définir la valeur par défaut dans la zone de sélection matériau-interface utilisateur dans réagir?

Question

J'utilise Sélectionnez la boîte dans Material-ui

Je veux afficher l'option "sélectionner la valeur" sélectionnée par défaut, mais après cet utilisateur n'est pas en mesure de sélectionner cette 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>

Code actuel sur le bac à sable: https://codesandbox.io/s/xoylmlj1qp

Je veux faire comme ceci: https://jsfiddle.net/wc1mxdto/

---

Mettre à jour

J'ai changé l'état 20 en chaîne vide dans le cercle

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

la sortie attendue maintenant devrait être la liste déroulante devrait montrer "s'il vous plaît sélectionnez valeur" mais actuellement il montrant ceci  

Answer 1

Vous devez fournir la valeur MenuItem correcte dans l'état à faire correspondre lors du rendu.

Voici la liste des codes de travail: Valeur de sélection par défaut Material-UI