【ReactHookForm】refを使用する方法

React Hook Formを使用している際にrefを使用するために以下のように記述すると'ref' が複数回指定されているため、ここでの使用は上書きされます。ts(2783)というエラーとなります。

import React, { useRef } from 'react'
import { useForm } from 'react-hook-form'

type Inputs = {
  firstName: string
  lastName: string
}

export default function App() {
  const { register, handleSubmit } = useForm<Inputs>()
  const firstNameRef = useRef<HTMLInputElement | null>(null)
  const onSubmit = (data: any) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input ref={firstNameRef} {...register('firstName')} />

      <button>Submit</button>
    </form>
  )
}

refを使用するには以下のように記述します。

import React, { useRef } from "react";
import { useForm } from "react-hook-form";

type Inputs = {
  firstName: string,
  lastName: string,
};

export default function App() {
  const { register, handleSubmit } = useForm<Inputs>();
  const firstNameRef = useRef<HTMLInputElement | null>(null);
  const onSubmit = data => console.log(data);
  const { ref, ...rest } = register('firstName');

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...rest} name="firstName" ref={(e) => {
        ref(e)
        firstNameRef.current = e
      }} />

      <button>Submit</button>
    </form>
  );
}