React Hook FormをUIライブラリのAnt Designで使う時にちょっと面倒だったのでメモ

Ant Designというよりは、Material UIや React-Selectなどフォーム関連の外部ライブラリを使う時にControllerというものを使う必要があるようです。

react-hook-form.com

最初は以下のように書いてましたが、refを認識しないようで、送信時のdataが空っぽでした。

import { useForm } from "react-hook-form";
import { Form, Input, Button, DatePicker } from "antd";

// 省略

const { register, handleSubmit, errors, reset } = useForm();

// 省略

<Input
    name="title"
    ref={register({ required: true })}
    placeholder="タイトルを入力"
/>

//省略

Controllerを使い以下のように書き換えました。UIライブラリ側で用意されているoptionはそのままControllerに渡せばいいようです。requiredの書き方がちょっと変わってます。

import { useForm, Controller } from "react-hook-form";
import { Form, Input, Button, DatePicker } from "antd";

// 省略

const { register, handleSubmit, errors, reset, control } = useForm();

// 省略

<Controller
    as={Input}
    control={control}
    name="text"
    className={styles.inputtext}
    rules={{ required: "Required" }}
    // defaultValue="初期値"
 />

//省略

思わぬところでつまづいてしまいました。