material-uiのSelect

Selectが切り替わらない。Controlledにするとだめ。 TextFieldは大丈夫なんだけどな...

TextFieldで書いてもいいらしい。見た目も綺麗なのでこっちで。

<TextField id="select" label="Age" value="20" select>
  <MenuItem value="10">Ten</MenuItem>
  <MenuItem value="20">Twenty</MenuItem>
</TextField>

そもそもFormControlとは？

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components: - FormLabel - FormHelperText - Input - InputLabel

上のコンポーネントに入力状態を与えるもの、という感じだろうか。

TypeScriptでの連番配列の作り方

Array.from(Array(10).keys())

「オムニ」は「全天候」という意味らしい。

Selectはvalueにtouchedを入れないと反映されないな...。とりあえずこれで。

<TextField
    error={
      formik.touched.surfaceOmni &&
      formik.errors.surfaceOmni !== undefined
    }
    id="surface-omni"
    label="人工芝面数"
    value={formik.touched.surfaceOmni && formik.values.surfaceOmni}
    helperText={formik.touched.surfaceOmni && formik.errors.surfaceOmni}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    className={classes.select}
    select
    >
    {Array.from(Array(surfaceMax + 1).keys()).map((num) => (
      <MenuItem key={`surface-omni-${num}`} value={num}>
        {num}
      </MenuItem>
    ))}
</TextField>

とりあえず選べるようになった。

※ 2021/01/28 訂正 これだとタッチするまでControlled Componentじゃなくなってしまうので、修正

 <TextField
    error={
      formik.touched.surfaceOmni &&
      formik.errors.surfaceOmni !== undefined
    }
    id="surface-omni"
    label="人工芝面数"
    value={formik.values.surfaceOmni}
    helperText={formik.touched.surfaceOmni && formik.errors.surfaceOmni}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
    className={classes.select}
    name="surfaceOmni"
    select
>
    {Array.from(Array(surfaceMax + 1).keys()).map((num) => (
      <MenuItem key={`surface-omni-${num}`} value={num}>
        {num}
      </MenuItem>
    ))}
</TextField>

tennico