web-dev-qa-db-ja.com

ReactのマテリアルUI選択ボックスにデフォルト値を設定する方法は？

私は ボックスを選択 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: ""
}

現在、期待される出力はドロップダウンに「値を選択してください」と表示されるはずですが、現在はこれを表示しています enter image description here

reactjsreact-reduxmaterial-designmaterial-uijss
7
user944513

レンダリング時に一致する状態の正しいMenuItem値を指定する必要があります。

動作するコードサンドボックスは次のとおりです。 デフォルトの選択値Material-UI

5
Sakhi Mansoor

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>
  );
}
1
B4BIPIN