Reactでdiv要素にonKeyDownイベントを実装する方法

2024-04-22

React で <div> 要素における onKeyDown イベントが機能しない問題：徹底解説

問題概要

解決策

この問題を解決するには、以下の2つの方法があります。

tabIndex 属性を設定する

<div> 要素に tabIndex 属性を設定することで、フォーカス可能となり、onKeyDown イベントを検知できるようになります。

<div tabIndex="0" onKeyDown={handleKeyDown}>
  ... 要素内容 ...
</div>

フォーカス可能な要素を内包する

<div> 要素内にフォーカス可能となる要素 (例: <input>, <button>) を内包することで、onKeyDown イベントを検知できるようになります。

<div>
  <input onKeyDown={handleKeyDown} />
  ... 要素内容 ...
</div>

補足

tabIndex 属性を設定する場合は、0 以上の値を指定する必要があります。
フォーカス可能な要素を内包する場合、実際にフォーカスされるのは内包された要素となります。
上記以外にも、useRef や useEffect フックを用いた方法なども存在します。

サンプルコード：onKeyDown イベントを <div> 要素で利用する

tabIndex 属性を使用する

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleKeyDown = (event) => {
    if (event.key === 'ArrowUp') {
      setCount(count + 1);
    } else if (event.key === 'ArrowDown') {
      setCount(count - 1);
    }
  };

  return (
    <div tabIndex="0" onKeyDown={handleKeyDown}>
      現在のカウント数： {count}
    </div>
  );
}

export default App;

このコードでは、<div> 要素に tabIndex="0" 属性を設定することでフォーカス可能にし、onKeyDown イベントを設定しています。イベントハンドラ handleKeyDown では、押されたキーに応じて count の値を更新しています。

フォーカス可能な要素を内包する

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleKeyDown = (event) => {
    if (event.key === 'ArrowUp') {
      setCount(count + 1);
    } else if (event.key === 'ArrowDown') {
      setCount(count - 1);
    }
  };

  return (
    <div>
      <input onKeyDown={handleKeyDown} />
      現在のカウント数： {count}
    </div>
  );
}

export default App;

このコードでは、<div> 要素内に <input> 要素を内包することでフォーカス可能にし、onKeyDown イベントを設定しています。<input> 要素にフォーカスが当たっている状態でキーが押されると、イベントハンドラ handleKeyDown が実行されます。

補足

上記のコード例はあくまで基本的な例であり、状況に応じて自由にカスタマイズできます。
イベントハンドラ内で実行する処理は、必要に応じて変更してください。

React で onKeyDown イベントを <div> 要素で利用する：その他の方法

useRef フックを用いて、<div> 要素への参照を取得し、その参照オブジェクトに onKeyDown イベントを設定する方法です。

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

function App() {
  const divRef = useRef(null);
  const [count, setCount] = useState(0);

  const handleKeyDown = (event) => {
    if (event.key === 'ArrowUp') {
      setCount(count + 1);
    } else if (event.key === 'ArrowDown') {
      setCount(count - 1);
    }
  };

  useEffect(() => {
    divRef.current.addEventListener('keydown', handleKeyDown);
    return () => divRef.current.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div ref={divRef}>
      現在のカウント数： {count}
    </div>
  );
}

export default App;

このコードでは、useRef フックで divRef という変数に <div> 要素への参照を取得しています。その後、useEffect フックを使用して、addEventListener メソッドで keydown イベントリスナーを <div> 要素に追加しています。

useEffect フックと document.addEventListener を組み合わせて、<div> 要素内のキーダウンイベントを検知する方法です。

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

function App() {
  const [count, setCount] = useState(0);

  const handleKeyDown = (event) => {
    if (event.key === 'ArrowUp') {
      setCount(count + 1);
    } else if (event.key === 'ArrowDown') {
      setCount(count - 1);
    }
  };

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div>
      現在のカウント数： {count}
    </div>
  );
}

export default App;

このコードでは、useEffect フックを使用して、document.addEventListener メソッドで keydown イベントリスナーを document オブジェクトに追加しています。このイベントリスナーは、ウィンドウ内の任意の場所でキーが押されたときに実行されます。