当サイトは、アフィリエイト広告を利用しています

Reactでhoverイベントを検知する方法

作成日：2022月07月08日

更新日：2024年03月28日

Reactでhoverイベントを検知して処理を行う方法をまとめる。
今回はReactでhoverイベントを検知後、Emotionでstyleを変更するサンプル
を作成してみる。

【SALE】ロジクールワイヤレスマウストラックボール無線 M575Sa Bluetooth Unifying トラックボールマウスワイヤレスマウス windows mac iPad 国内正規品 1年間無償保証

ReactにonHoverイベントはない

色々調べてみたところ、ReactにはonHoverイベントハンドラーはないらしい。
だが変わりに

onMouseEnter
onMouseLeave

使うことでonHoverと同様の状態を実現できるようだ.

サンプル実装と解説

ReactとEmotionでhover時に色が変わるサンプルを実装する

App.jsx


/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { useState } from "react";
import "./styles.css";

export default function App() {
  // useStateでcoloerを管理
  const [color, setColor] = useState("black");

  return (
    <div
      css={[container]}
      className="App"
      onMouseEnter={() => setColor("red")}
      onMouseLeave={() => setColor("black")}
    >
      <h1 css={[style(color)]}>Hello CodeSandbox</h1>
      <h2 css={[css`text-align:center`]}>react + emotion</h2>
    </div>
  );
}

const container = () => [
  css`
    border: 1px solid;
  `
];

const style = (color) => [
  css`
    text-align:center;
    color: ${color};
    transition-property: all;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease-in;
  `
];