ReactJSでホバー状態を駆使して、インタラクティブなUIを構築しよう！
ReactJSでホバー状態にアクセスする方法
ホバー状態にアクセスするには、onMouseEnter と onMouseLeave イベントハンドラを使用します。これらのイベントハンドラは、マウスカーソルが要素に入る/出るたびにトリガーされます。
onMouseEnter イベントハンドラは、マウスカーソルが要素の上に入ったときにトリガーされます。このイベントハンドラを使用して、要素のスタイルを変更したり、コンポーネントの状態を変更したりできます。
function MyComponent() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
{isHovered ? <p>ホバー中</p> : <p>ホバーしていない</p>}
</div>
);
}
この例では、onMouseEnter イベントハンドラを使用して、isHovered ステートを true に設定しています。これにより、要素内のテキストが「ホバー中」に変更されます。
function MyComponent() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
{isHovered ? <p>ホバー中</p> : <p>ホバーしていない</p>}
</div>
);
}
スタイルの変更
onMouseEnter および onMouseLeave イベントハンドラを使用して、要素のスタイルを直接変更することもできます。
function MyComponent() {
return (
<div onMouseEnter={() => {
const element = document.getElementById('myElement');
element.style.backgroundColor = 'red';
}} onMouseLeave={() => {
const element = document.getElementById('myElement');
element.style.backgroundColor = 'white';
}}>
<p>要素</p>
</div>
);
}
この例では、onMouseEnter イベントハンドラを使用して要素の背景色を赤色に、onMouseLeave イベントハンドラを使用して要素の背景色を白に変更しています。
onMouseEnter と onMouseLeave イベントハンドラを使用して、ReactJSでホバー状態にアクセスできます。これらのイベントハンドラを使用して、要素の外観や動作を変更できます。
ReactJSでホバー状態にアクセスするサンプルコード
サンプル 1: 要素のスタイルを変更する
import React, { useState } from 'react';
function MyComponent() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<p style={{ backgroundColor: isHovered ? 'red' : 'white' }}>ホバー状態</p>
</div>
);
}
export default MyComponent;
サンプル 2: コンポーネントの状態を変更する
このサンプルコードでは、onMouseEnter イベントハンドラを使用してコンポーネントの状態を true に、onMouseLeave イベントハンドラを使用してコンポーネントの状態を false に設定します。
import React, { useState } from 'react';
function MyComponent() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
{isHovered ? <p>ホバー中</p> : <p>ホバーしていない</p>}
</div>
);
}
export default MyComponent;
サンプル 3: カスタムフックを使用する
このサンプルコードでは、useHover というカスタムフックを使用して、ホバー状態を管理します。
import React, { useState } from 'react';
function useHover() {
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return {
isHovered,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
};
}
function MyComponent() {
const { isHovered, onMouseEnter, onMouseLeave } = useHover();
return (
<div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
{isHovered ? <p>ホバー中</p> : <p>ホバーしていない</p>}
</div>
);
}
export default MyComponent;
これらのサンプルコードは、ReactJSでホバー状態にアクセスする方法を理解するための出発点として役立ちます。
ReactJSでホバー状態にアクセスするその他の方法
useRef フックを使用して、要素への参照を取得し、その参照を使用してホバー状態を管理できます。
import React, { useState, useRef } from 'react';
function MyComponent() {
const elementRef = useRef(null);
const [isHovered, setIsHovered] = useState(false);
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<div ref={elementRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<p>要素</p>
</div>
);
}
export default MyComponent;
この例では、useRef フックを使用して elementRef という変数に要素への参照を取得しています。onMouseEnter イベントハンドラでは、elementRef.current.style.backgroundColor = 'red' を使用して要素の背景色を赤色に設定しています。onMouseLeave イベントハンドラでは、elementRef.current.style.backgroundColor = 'white' を使用して要素の背景色を白に設定しています。
useEffect フックを使用して、要素にイベントリスナーを追加し、ホバー状態を管理できます。
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [isHovered, setIsHovered] = useState(false);
useEffect(() => {
const element = document.getElementById('myElement');
element.addEventListener('mouseenter', () => {
setIsHovered(true);
});
element.addEventListener('mouseleave', () => {
setIsHovered(false);
});
return () => {
element.removeEventListener('mouseenter', () => {
setIsHovered(true);
});
element.removeEventListener('mouseleave', () => {
setIsHovered(false);
});
};
}, []);
return (
<div id="myElement">
<p>要素</p>
</div>
);
}
export default MyComponent;
この例では、useEffect フックを使用して、myElement という ID を持つ要素に mouseenter と mouseleave イベントリスナーを追加しています。これらのイベントリスナーは、マウスカーソルが要素の上に入った/出たときにトリガーされ、setIsHovered ステートを更新します。
サードパーティのライブラリ
ReactJSでホバー状態を管理するために使用できるサードパーティのライブラリがいくつかあります。
これらのライブラリは、特定のユースケースに適している場合があります。
ReactJSでホバー状態にアクセスするには、さまざまな方法があります。ニーズに合った方法を選択してください。
- シンプルで使いやすい:
onMouseEnterとonMouseLeaveイベントハンドラ - 柔軟性が高い:
useRefフック - パフォーマンス:
useEffectフック - 機能: サードパーティのライブラリ
どの方法を選択する場合でも、コードが読みやすく、保守しやすいことを確認してください。
hover reactjs
