ツールヒントを表示したり、ユーザーが何かを乗り越えるときに要素のスタイルを変更したりするシナリオに遭遇したかもしれません.このチュートリアルでは、マウスのホバーイベントを処理するために使用可能な関数が何であるかを学びます.

プロジェクトの設定

次のコマンドを使用して、新しい反応プロジェクトを作成しましょう.

npx create-react-app react-on-hover

若干の基本的なスタイルを加えましょうindex.css , 次の手順で使用します.

.button {
  background-color: maroon;
  color: white;
  padding: 5px 10px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}
.outer-box {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

.inner-box {
  margin: 50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.message {
  text-align: center;
}

ボタンを閉じるときのスタイルの変更

ボタンを加えて、ユーザーがそれの上に乗り上げるとき、その色を変えましょう

function App() {
  const handleMouseEnter = e => {
    e.target.style.background = "grey"
  }
  const handleMouseLeave = e => {
    e.target.style.background = "maroon"
  }

  return (
    <div className="App">
      <button
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        className="button"
      >
        Hover over me
      </button>
    </div>
  )
}

export default App

ご覧のように、私たちはonMouseEnter イベントは、マウスがボタンをオンにしてボタンの色を変更するときに知っている.
また、私たちはonMouseLeave イベントは、ユーザーがボタンの色を変更することができるように、ボタンのホーアウトしたときに識別するために、元のものに.

ボタンが押されたときにテキストを表示する

ボタンを移動したときにテキストを表示したい場合は、状態を導入し、true ボタンが押されるとき、そして、それをセットすることによってfalse マウスが移動したとき:

import { useState } from "react"

function App() {
  const [showText, setShowText] = useState(false)
  const handleMouseEnter = e => {
    e.target.style.background = "grey"
    setShowText(true)
  }
  const handleMouseLeave = e => {
    e.target.style.background = "maroon"
    setShowText(false)
  }

  return (
    <div className="App">
      <button
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        className="button"
      >
        Hover over me
      </button>
      {showText && <p className="message">Now you can see me!</p>}
    </div>
  )
}

export default App

OnMouseOverとOnMouseOutイベント

同じ目標を達成することができる他のイベントのカップルがありますonMouseOver and onMouseOut イベント.これらの出来事と我々が以前に論じたものの重要な違いonMouseEnter and onMouseLeave ) あれはonMouseOver and onMouseOut DOM階層を伝播する.
より良い理解のために、例の助けとの違いを見ましょう.

function App() {
  const hoverHandler = () => {
    console.log("onMouseEnter")
  }
  const outHandler = () => {
    console.log("onMouseLeave")
  }
  return (
    <div className="App">
      <div
        className="outer-box"
        onMouseEnter={hoverHandler}
        onMouseLeave={outHandler}
      >
        <div className="inner-box"></div>
      </div>
    </div>
  )
}

export default App

ここでは2つの箱があります.下のアニメーションから見ることができました.onMouseEnter and onMouseLeave 私たちは親と子のdivを複数回ホバリングしています.

onmouseoverとonmouseoutでコードを更新しましょう.

function App() {
  const hoverHandler = () => {
    console.log("onMouseEnter")
  }
  const outHandler = () => {
    console.log("onMouseLeave")
  }
  return (
    <div className="App">
      <div
        className="outer-box"
        onMouseOver={hoverHandler}
        onMouseOut={outHandler}
      >
        <div className="inner-box"></div>
      </div>
    </div>
  )
}

export default App

下記の通りです.onMouseLeave は、我々が外側のdivonMouseEnter 我々がインナー部門に入るとき、引き起こされます
同様のことは、子のdivから親の親にも移動するときに起こります.

1つの要素がある場合は、マウスのホバーイベントをバインドする必要があります.階層に複数の項目がある場合は、必要に応じてオプションを選択できます.