Next.js (React) で何故か autoFocus が効かない

問題

<input type="text" autoFocus={true} /> が何故か動作しない

解決

useRef やら useEffect やらを使う例が見つかった

pages/example.tsx

import type { AppProps } from 'next/app'
import React, { useEffect, useRef, useState } from 'react';

export default function AutoFocus({ Component, pageProps }: AppProps) {
  const inputElement = useRef(null);

  useEffect(() => {
    if (inputElement.current) {
      inputElement.current.focus();
    }
  }, []);

  return (
    <div>
        <input type="text" ref={inputElement} />
    </div>
  );
}

結果

参考

https://blog.maisie.ink/react-ref-autofocus/

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-01