MaterialUI + useForm

背景

MaterialUiのinputのvalueと useFormの値の管理でかなり詰まったのでまとめ

まとめ

• MaterialUiの値の操作は、基本的にvalueプロパティで変更可能 valueプロパティの値を stateで保持して、setStateで値を更新すれば操作可能

• useFormとMateriUiのコンポーネント操作の違い

コンポーネントの値の更新は、自身でstateを作成し、その値を更新することで変更可能 useFormの値は useFormが setValue メソッドを持っているので、setValueで値を更新する

• 便利メソッド

setValueは useFormの値を更新出来る

getValues はuseFormの値を取得出来る 引数ありの場合は指定した引数にキーの文字列を入れれば値取得可能

コード

• 初期設定

  const {
    control,
    register,
    setValue,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<RequestInputProps>(formOptions);

• Autocompleteの管理

Autocompleteの値は valueで管理 useFormはsetValueで更新 onChangeイベントで値を検知

                      <Controller
                        control={control}
                        name='partner_id'
                        render={({ field, fieldState }) => (
                          <Autocomplete
                            freeSolo
                            {...field}
                            value={partnerName}. // { name: string, id: number}
                            options={partnerNames}
                            disableCloseOnSelect
                            getOptionLabel={(option: any) => option.name}
                            onChange={(e, newValue) => {
                              setValue('partner_id', `${newValue?.id}` || '');
                            }}
                            onInputChange={(e, newValue) => {
                              setValue('partner_id', `input-${newValue}`);
                            }}
                            renderOption={(props, option, { selected }) => (
                              <li {...props}>
                                <Checkbox style={{ marginRight: 8 }} checked={selected} />
                                {option.name}
                              </li>
                            )}
                            renderInput={(params) => (
                              <TextField
                                {...params}
                                label='取引先'
                                error={fieldState.error ? true : false}
                                helperText={fieldState.error?.message}
                                style={{ width: 418 }}
                                InputLabelProps={{ shrink: true }}
                              />
                            )}
                          />
                        )}