React フォーカス検出方法

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

JavaScriptやNode.js、ReactJSなどのプログラミングにおいて、入力要素（例えば、テキストボックスやボタン）がフォーカスされているかどうかを検出する方法はいくつかあります。以下にその方法を日本語で説明します。

useRefフックを利用する

• コード例
  
• 原理
  useRefフックを使って入力要素への参照を取得し、そのcurrentプロパティでフォーカス状態を判断します。

import { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleFocus = () => {
      console.log('Input is focused!');
    };

    const handleBlur = () => {
      console.log('Input is blurred!');
    };

    inputRef.current.addEventListener('focus', handleFocus);
    inputRef.current.addEventListener('blur', handleBlur);

    return () => {
      inputRef.current.removeEventListener('focus', handleFocus);
      inputRef.current.removeEventListener('blur', handl   eBlur);
    };
  }, []);

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

onFocusとonBlurイベントハンドラーを使用する

• 原理
  入力要素にonFocusとonBlurイベントハンドラーを直接設定し、フォーカス状態の変化を検出します。

function MyComponent() {
  const handleFocus = () => {
    console.log('Input is focused!');
  };

  const handleBlur = () => {
    console.log('Input is blurred!');
  };

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

カスタムフックを作成する

• 原理
  フォーカス状態を管理するカスタムフックを作成し、他のコンポーネントから再利用できるようにします。

import { useState, useEffect } from 'react';

function useFocus(ref) {
  const [isFocused, setIsFocused] = useState(false);

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

       ref.current.addEventListener('focus', handleFocus);
    ref.current.addEventListener('blur', handleBlur);

    return () => {
      ref.current.removeEventListener('focus', handleFocus);
      ref.current.removeEventListener('blur', handleBlur);
    };
  }, [ref]);

  return isFo   cused;
}

function MyComponent() {
  const inputRef = useRef(null);
  const isFocused = useFocus(inputRef);

  return (
    <div>
      <input type="text" ref={inputRef} />
      <p>Is focused: {isFocused ? 'Yes' : 'No'}</p>
    </div>
  );
}

import { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleFocus = () => {
      console.log('Input is focused!');
    };

    const handleBlur = () => {
      console.log('Input is blurred!');
    };

    inputRef.current.addEventListener('focus', handleFocus);
    inputRef.current.addEventListener('blur', handleBlur);

    return () => {
      inputRef.current.removeEventListener('focus', handleFocus);
      inputRef.current.removeEventListener('blur', handl   eBlur);
    };
  }, []);

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

• 解説
  
  • useRefフックを使って入力要素への参照を取得します。
  • useEffectフックでイベントリスナーを追加し、フォーカスとブラーのイベントを処理します。
  • フォーカスされた場合にhandleFocus関数が、ブラーされた場合にhandleBlur関数が呼び出されます。

function MyComponent() {
  const handleFocus = () => {
    console.log('Input is focused!');
  };

  const handleBlur = () => {
    console.log('Input is blurred!');
  };

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

• 解説
  
  • 入力要素に直接onFocusとonBlurイベントハンドラーを指定します。

import { useState, useEffect } from 'react';

function useFocus(ref) {
  const [isFocused, setIsFocused] = useState(false);

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

       ref.current.addEventListener('focus', handleFocus);
    ref.current.addEventListener('blur', handleBlur);

    return () => {
      ref.current.removeEventListener('focus', handleFocus);
      ref.current.removeEventListener('blur', handleBlur);
    };
  }, [ref]);

  return isFo   cused;
}

function MyComponent() {
  const inputRef = useRef(null);
  const isFocused = useFocus(inputRef);

  return (
    <div>
      <input type="text" ref={inputRef} />
      <p>Is focused: {isFocused ? 'Yes' : 'No'}</p>
    </div>
  );
}

• 解説
  
  • フォーカス状態を管理するカスタムフックuseFocusを作成します。
  • useFocusフックを呼び出して、入力要素への参照を渡します。
  • useFocusフックは、フォーカス状態を管理し、その状態をコンポーネントに返します。

document.activeElementを使用する

• 原理
  document.activeElementプロパティは、現在フォーカスされている要素を返します。

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const handleFocus = () => {
      setIsFocused(document.activeElement === inputRef.current);
    };

    inputRef.current.addEventListener('focus', handleFocus);

    return () => {
      inputRef.current.removeEventListener('focus', handleFocus);
    };
  }, [inputRef]);

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

useContextフックを利用する

• 原理
  フォーカス状態をグローバルなコンテキストに保存し、複数のコンポーネントからアクセスします。

import { createContext, useContext, useState, useEffect } from 'react';

const FocusContext = createContext(null);

function FocusProvider({ children }) {
  const [isFocused, setIsFocused] = useState(false);

  useEffect(() => {
    const handleFocus = () => {
      setIsFocused(document.activeElement === inputRef.current);
    };

    inputRef.current.addEventListener('focus', handleFocus);

    return () => {
      inputRef.current.removeEventListener('focus', handleFocus);
    };
  }, [inputRef]);

  return (
    <FocusContext.Provider value={isFocused}>{children}</FocusContext.Provider>
  );
}

function MyComponent() {
  const isFocused = useContext(FocusContext);

  return (
    <div>
      <input type="text" ref={inputRef} />
      <p>Is focused: {isFocused ? 'Yes' : 'No'}</p>
    </div>
  );
}

ライブラリを使用する

• 例
  react-focus-lockライブラリを使用する場合
• 原理
  フォーカス検出機能を提供するライブラリを使用することで、コードを簡潔に記述できます。

import { useFocusLock } from 'react-focus-lock';

function MyComponent() {
  const { activate, deactivate } = useFocusLock();

  useEffect(() => {
    activate();
    return () => deactivate();
  }, []);

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