⛳

MUI + React Hook Formでフォーム作成

2024/01/03に公開

React

はじめに

今回作るMUI + React Hook Formのソースコードは↓こちらです。

開発環境

パッケージマネージャー：pnpm
バンドラー:Vite
react: 18.2.0
typescript: 5.2.2
react-hook-form: 7.49.2
@mui/material: 5.15.0
@mui/x-date-pickers: 6.18.6

MUIとは？

マテリアル UI は、Google のマテリアルデザインを実装する React UI コンポーネントのライブラリです。

React Hook Formとは？

React Hook Form の設計と哲学は、ユーザーと開発者のエクスペリエンスに重点を置いています。このライブラリは、パフォーマンスを微調整し、アクセシビリティを向上させることで、よりスムーズな対話エクスペリエンスをユーザーに提供することを目的としています。パフォーマンスの強化には次のようなものがあります。

Reactの環境構築について

今回、Reactの環境構築に関する説明は省きますが、下記添付記事でVite+React+TypeScriptの環境構築方法を解説しているので、よければ参照ください。

MUIとReact Hook Formでフォーム作成

MUIとReact Hook Formでフォームを作成する際、制御コンポーネントと非制御コンポーネントに関しての話が絡んできます。非制御・制御コンポーネントに関するざっくりとしたイメージ↓

必要なパッケージのインストール

pnpm add @mui/material @mui/x-date-pickers @emotion/react @emotion/styled react-hook-form dayjs

※styled-componentsを使用する際は、別のパッケージが必要です。詳しくは公式を参照してください。

MUIでフォーム作成

MUIで適当にフォームを作成する。

function App() {
・・・中略・・・
  return (
    <Container maxWidth="sm" sx={{ pt: 5 }}>
      <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
        <Stack spacing={3}>
          <TextField id="text" label="テキスト" />
          <FormControl>
            <InputLabel id="select">セレクトボックス</InputLabel>
            <Select labelId="select" id="select" label="セレクトボックス" defaultValue="0" >
              <MenuItem value={"0"}>0</MenuItem>
              <MenuItem value={"1"}>1</MenuItem>
              <MenuItem value={"2"}>2</MenuItem>
              <MenuItem value={"3"}>3</MenuItem>
            </Select>
          </FormControl>
          <FormGroup>
            <FormLabel id="checkbox">チェックボックス</FormLabel>
            <FormControlLabel control={<Checkbox />} label="松" />
            <FormControlLabel control={<Checkbox />} label="竹" />
            <FormControlLabel control={<Checkbox />} label="梅" />
          </FormGroup>
          <FormControl>
            <FormLabel id="radio">ラジオ</FormLabel>
            <RadioGroup aria-labelledby="radio" name="radio">
              <FormControlLabel value="radio1" control={<Radio />} label="radio1" />
              <FormControlLabel value="radio2" control={<Radio />} label="radio2" />
              <FormControlLabel value="radio3" control={<Radio />} label="radio3" />
            </RadioGroup>
          </FormControl>
	  <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker label="date" format="YYYY/MM/DD" />
          </LocalizationProvider>
          <Button type="submit" color="primary" variant="contained" size="large">
            ボタン
          </Button>
        </Stack>
      </Box>
    </Container>
  )
}
export default App

React Hook FormをMUIに繋げる

MUIの<TextField />などは制御コンポーネントと非制御コンポーネントどちらとしても扱うことができる。
非制御コンポーネント：defaultValueを使用
制御コンポーネント：<Controller />とvalueやonChangeなどを使用

※<DatePicker />は非制御コンポーネントとして扱えない。

非制御コンポーネントとして扱う場合

繋げるだけであれば下記コードでできる。

const { register, handleSubmit } = useForm()
・・・中略・・・
return (
  <Box component="form" onSubmit={handleSubmit(onSubmit)}>
    <TextField {...register("text")} />
    <Button type="submit">ボタン</Button>
  </Box>
)

これをMUIでフォーム作成で作成したフォームに落とし込むと

※<DatePicker />だけはregisterで繋ぎ込みができないので省略

制御コンポーネントとして扱う場合

以上！！