【ReactJS】 useRef、onFocus/onBlur、カスタムフック、ライブラリ… それぞれの状況に合った最適な方法で入力要素のフォーカス状態を検出・制御しよう

2024-06-23

ReactJSで入力要素がフォーカスされているかどうかを検出する

useRefフックを使用して、入力要素への参照を取得し、document.activeElementと比較することで、フォーカス状態を確認できます。

const inputRef = useRef(null);

const isFocused = () => inputRef.current === document.activeElement;

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

onFocusとonBlurイベントを使用して、入力要素がフォーカスされたか失われたかを検出できます。

const [isFocused, setIsFocused] = useState(false);

const handleFocus = () => setIsFocused(true);
const handleBlur = () => setIsFocused(false);

return (
  <input type="text" onFocus={handleFocus} onBlur={handleBlur} />
);

それぞれの方法の利点と欠点

useRefフック
- 利点: シンプルでわかりやすい
- 欠点: フォーカス状態の変化ごとに再レンダリングが発生する
onFocus/onBlurイベント
- 利点: 再レンダリングが発生しない
- 欠点: イベントハンドラを定義する必要がある

フォーカス状態に応じてUIを動的に変更する必要がある場合は、useRefフックを使用するのがおすすめです。
フォーカス状態に基づいてデータ処理を行う必要がある場合は、onFocus/onBlurイベントを使用するのがおすすめです。

上記のコードはあくまで例であり、状況に合わせて調整する必要があります。
アクセシビリティを考慮して、適切な方法を選択する必要があります。

補足

document.activeElementは、現在フォーカスされている要素を取得するためのプロパティです。
useRefフックは、Reactコンポーネント内で参照可能な値を保持するためのフックです。

ご参考になりましたでしょうか？

import React, { useState, useRef } from 'react';

const App = () => {
  const inputRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input type="text" ref={inputRef} onFocus={handleFocus} onBlur={handleBlur} />
      <p>フォーカス状態: {isFocused ? 'フォーカス中' : 'フォーカスなし'}</p>
    </div>
  );
};

export default App;

onFocus/onBlurイベントを使用する

import React, { useState } from 'react';

const App = () => {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <input type="text" onFocus={handleFocus} onBlur={handleBlur} />
      <p>フォーカス状態: {isFocused ? 'フォーカス中' : 'フォーカスなし'}</p>
    </div>
  );
};

export default App;

説明

上記のコードは、入力要素がフォーカスされたか失われたかを検出し、その状態をisFocusedというステート変数に格納します。
onFocus/onBlurイベントを使用する例では、onFocusとonBlurイベントハンドラを使用して、入力要素がフォーカスされたか失われたかを検出しています。
いずれの例でも、isFocusedステート変数の値に基づいて、フォーカス状態を示すメッセージを表示しています。

ReactJSで入力要素がフォーカスされているかどうかを検出するその他の方法

useImperativeHandleフックは、Reactコンポーネントから外部コードにアクセスできるようにするフックです。このフックを使用して、入力要素への参照を取得し、フォーカス状態を外部コードから制御することができます。

import React, { useState, useRef, useImperativeHandle } from 'react';

const Input = React.forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    blur: () => inputRef.current.blur(),
    isFocused: () => isFocused,
  }));

  return (
    <input type="text" ref={inputRef} onFocus={handleFocus} onBlur={handleBlur} />
  );
});

const App = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  const handleBlur = () => {
    inputRef.current.blur();
  };

  const checkFocus = () => {
    console.log(`フォーカス状態: ${inputRef.current.isFocused}`);
  };

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>フォーカスする</button>
      <button onClick={handleBlur}>フォーカスを外す</button>
      <button onClick={checkFocus}>フォーカス状態を確認</button>
    </div>
  );
};

export default App;

利点:

外部コードからフォーカス状態を制御できる
テストが容易

コードが複雑になる

カスタムフックを使用して、フォーカス状態の管理をカプセル化することができます。この方法では、useRefフックやonFocus/onBlurイベントを内部で処理し、外部コードからはシンプルなAPIを提供することができます。

import React, { useState, useRef } from 'react';

const useFocus = () => {
  const inputRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return {
    inputRef,
    isFocused,
    focus: () => inputRef.current.focus(),
    blur: () => inputRef.current.blur(),
  };
};

const Input = ({ focus, blur, isFocused }) => {
  return (
    <input type="text" ref={focus} onFocus={handleFocus} onBlur={handleBlur} />
  );
};

const App = () => {
  const { inputRef, isFocused, focus, blur } = useFocus();

  return (
    <div>
      <Input focus={focus} blur={blur} isFocused={isFocused} />
      <button onClick={() => focus()}>フォーカスする</button>
      <button onClick={() => blur()}>フォーカスを外す</button>
      <p>フォーカス状態: {isFocused ? 'フォーカス中' : 'フォーカスなし'}</p>
    </div>
  );
};

export default App;