背景
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 }} /> )} /> )}