Zenn
💭

React Hook FormとMUIコンポーネントの連携

2024/02/17に公開
React
React Hook Form
mui
tech

目的

React Hook Form で MUI コンポーネントとの連携方法をまとめます。

基本的に React Hook Form（以下 rhf）と MUI の連携方法は以下のブログを参考にControllerを通して行っていきます。
Integrating with UI libraries

rhf の詳しい使い方や MUI については各種ドキュメントや他の記事を参考にしてください。

メモ

下準備

useForm

以下のコードでcontrolを用意します。

const {control} = useForm()

string 以外の値を rhf に登録したいとき

Controllerなどの render props で渡される onChange プロパティに、event から取得した値を任意の型、例えば数値であれば文字列でわたってくるのでparseIntなどで変換した値を onChange 関数の引数に渡してあげれば任意の型で rhf に登録できます。

Checkbox

<Controller
  name="textFieldValue"
  control={control}
  render={({ field }) => <TextField type="number" {...field} onChange={(event) => field.onChange(parseInt(event.currentTarget.value))} />}
/>

RadioGroup

<Controller
  name="radioGroupValue"
  control={control}
  render={({ field }) => (
    <FormControl>
      <RadioGroup {...field}>
        <FormControlLabel value="female" control={<Radio />} label="女性" />
        <FormControlLabel value="male" control={<Radio />} label="男性" />
        <FormControlLabel value="other" control={<Radio />} label="その他" />
      </RadioGroup>
    </FormControl>
  )}
/>

value を文字列以外にしたい場合。今回は boolean を管理する方法。

<Controller
  name="radioGroupFlag"
  control={control}
  render={({ field }) => (
    <FormControl>
      <RadioGroup {...field} onChange={(event) => field.onChange(event?.currentTarget.value === "true")}>
        <FormControlLabel value={true} control={<Radio />} label="有効" />
        <FormControlLabel value={false} control={<Radio />} label="無効" />
      </RadioGroup>
    </FormControl>
  )}
/>

Select

<Controller
  name="selectValue"
  control={control}
  render={({ field }) => (
    <Select {...field} displayEmpty>
      <MenuItem value=""><em>なし</em></MenuItem>
      <MenuItem value="female">女性</MenuItem>
      <MenuItem value="male">男性</MenuItem>
      <MenuItem value="other">その他</MenuItem>
    </Select>
  )}
/>

TextField

<Controller
  name="textFieldValue"
  control={control}
  render={({field}) => <TextField {...field} />}
/>

上記は値が文字列の場合だが、type="number"を指定した場合などは onChange に変換後の値を渡してやれば Form にはnumberが登録される。

<Controller
  name="textFieldValue"
  control={control}
  render={({ field }) => <TextField type="number" {...field} onChange={(event) => field.onChange(parseInt(event.currentTarget.value))} />}
/>

終わりに

今回は React Hook Form と MUI の連携についてよく使うコンポーネントで連携方法をまとめてみました。

もしこういう方法もあるよ、やこのコンポーネントはこうやって連携できるよなどあればコメントをいただけると嬉しいです。

今回作成したコードのサンプルは以下のリポジトリにおいておきます。
https://github.com/tamago0224/react-hook-form-mui

GitHubで編集を提案

Discussion