okaryo.log

ReactでonHoverイベントを制御する | okaryo.log

ReactでonHoverイベントを制御する

    #React

はじめに

個人開発で作成してるChrome拡張のTabTabTabはReactで作成しており、要素へのマウスホバーに応じて表示・非表示を切り替えるという実装をしている箇所がある。

しかし、ReactにはonHoverというイベントハンドラはなく、たまに実装を忘れてしまうので残しておく。

実装方法

上にも書いたがReactにonHoverというイベントハンドラはない。代わりにonMouseEnteronMouseLeaveというイベントハンドラを利用して同様の機能を実装する。

  • onMouseEnter: 要素上にマウスカーソルが入った際に発火するイベントハンドラ
  • onMouseLeave: 要素上からマウスカーソルが出て行った際に発火するイベントハンドラ

それぞれのイベントが発火した際に状態を更新すると良い。

const Sample = () => {
  const [isHover, setIsHover] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {isHover ? "Hovered!" : "Not Hovered!"}
    </div>
  );
};

おわり

onMouseEnteronMouseLeave以外のイベントについては以下のページにまとめられている。ざっと見ておくと良いかもしれない。

https://react.dev/reference/react-dom/components/common#common-props


関連記事
最新記事
プロモーション

This site uses Google Analytics.