[Next.js]useRefでinputにfocusする

useRef で focus を付ける Example

useRef を使用して input を focus する場合、以下のような感じで実装できます。

const inputRef = useRef<HTMLInputElement>(null);
const handleClick = () => {
  inputRef && inputRef.current?.focus();
};
return (
  <>
    <input ref={inputRef} />
    <button onClick={handleClick}>focus!</button>
  </>
);

TypeScript で useRef の型定義を忘れると怒られるので注意

nextjs + TypeScript で useRef を使って input の focus を操作しようとするとエラーになります。

Property 'value' does not exist on type 'never'.
useRef 使用時に「プロパティ focus は型 never に存在しません。」

解決策

TypeScript の場合はuesRef に対して型定義を付けましょう。

// mistaken 😥
const inputRef = useRef(null);
// correct 😃
const inputRef = useRef<HTMLInputElement>(null);