ReactでonHoverイベントを制御する
はじめに
個人開発で作成してるChrome拡張のTabTabTabはReactで作成しており、要素へのマウスホバーに応じて表示・非表示を切り替えるという実装をしている箇所がある。
しかし、ReactにはonHoverというイベントハンドラはなく、たまに実装を忘れてしまうので残しておく。
実装方法
上にも書いたがReactにonHoverというイベントハンドラはない。代わりにonMouseEnterとonMouseLeaveというイベントハンドラを利用して同様の機能を実装する。
onMouseEnter: 要素上にマウスカーソルが入った際に発火するイベントハンドラonMouseLeave: 要素上からマウスカーソルが出て行った際に発火するイベントハンドラ
それぞれのイベントが発火した際に状態を更新すると良い。
const Sample = () => {
const [isHovered, setIsHovered] = useState(false);
return (
<div
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered ? "Hovered!" : "Not Hovered!"}
</div>
);
};おわり
onMouseEnterやonMouseLeave以外のイベントについては以下のページにまとめられている。ざっと見ておくと良いかもしれない。
