React Hook FormをMUIで使用した時のメモ。
今回はMUIの「TextField」と「CheckBox」に関して考えていきます。

・型を用意

まずはInputの型を定義

// TextFieldでtitleをCheckBoxでimportantを入力
type Inputs = {
  title: string;
　　important: boolean;
};

// keyの配列も事前に用意しておく
type InputsKeys = Array<keyof Inputs>;

・関数などの準備

まずはuseFormから必要なものを使用できるようにしておく

const {
  getValues,
  control,
  handleSubmit,
  unregister,
  formState: { 
    errors: formErrors, isDirty, dirtyFields 
  }
} = useForm<Inputs>({
　　defaultValues: {
    title: "React-Hook-FomeとMUI",
    important: true,
 }
});

getValues - 入力した値を取得
control - タブ内で使用
handleSubmit - submitの際に使用
unregister - 入力した値を削除する際に使用
isDirty - 入力に変更があるかのチェック(全体)
dirtyFields - 入力に変更があるかのチェック(個別)
defaultValues - 初期値を設定

・バリデーションを用意

  const validationRules = {
    title: {
      required: '名前を入力してください',
      minLength: { value: 4, message: '4文字以上で入力してください。' }
    },
  };

・フォームの中身

<Stack m={4} component="form" novalidate onSubmit={handleSubmit(onSubmit)}>
  <Box>
   　// ControllerでTextFieldをラップする
    <Controller
      name="title"
      control={control}
      rules={balidationRules.title}
　　　　　// {field , fieldState}を引数にする
      render={({ field, fieldState }) => (
         <TextField
           {...field}
           type="text"
           label="タイトル"
           // fieldState.invalidは非推奨のようです。
　　　　　　　　　　error={fieldState.invalid}
           helperText={fieldState.error?.message}
         />
      )} 
    />
    </Box>
　　　// ControllerでCheckBoxをラップ
　　　<Box mt={2}>
   　　<Controller
     　　name="important"
　　　　　　　control={control}
     　　render={({ field }) => <FormControlLabel label="重要" {...field} control={<Checkbox />} />}
      />
    </Box>
    // 送信ボタン
　　　　<Button variant="contained" type="submit">
        送信
　　　　</Box>
</Stack>

・onSubmit

// dataで全てに入力値を確認できる
const onSubmit = (data: Inputs) => {
   // 取得した値を確認できる
   console.log(data);    
};

もし画面遷移せずに送信と同時に入力した値を消去したいときは

const key = Object.keys(data) as InputsKeys;

// keyには入力値のkeyが配列で入る。
unregister(key, {keepDirty: false});