ReactJS - 滑鼠事件處理程式

---

---

滑鼠事件是 Web 開發的一個重要方面，尤其是在 React 中。它們允許我們構建對使用者輸入做出響應的動態 Web 應用。我們將在下一節中介紹一些滑鼠事件及其功能。然後，我們將建立一個基本的 React 應用，當發生某些滑鼠事件時，該應用會將訊息記錄到控制檯，以演示這些概念。

React MouseEvent

在 HTML 元素上，我們可以在 React 中處理諸如 onClick、onMouseEnter、onMouseLeave、onMouseDown、onMouseUp 和 onMouseOver 之類的滑鼠事件。當用戶使用滑鼠與元件互動時，會發生多個事件。讓我們在 React 應用的上下文中看看它們。

語法

滑鼠事件事件處理程式示例。

<div
   onClick={e => console.log('This is onClick')}
   onMouseDown={e => console.log('This is onMouseDown')}
   onMouseUp={e => console.log('This is onMouseUp')}
   onMouseLeave={e => console.log('This is onMouseLeave')}
   onMouseEnter={e => console.log('This is onMouseEnter')}
   onMouseOver={e => console.log('This is onMouseOver')}
/>

引數

e − 這是一個 React 事件物件。我們可以將此物件與各種 MouseEvent 屬性一起使用。

MouseEvent 屬性

讓我們快速瀏覽一下與 MouseEvent 相關的屬性 −

這些屬性允許我們訪問和控制滑鼠事件資訊，這對於在 React 中建立動態且響應迅速的使用者介面非常重要。

示例

示例 − 簡單卡片記錄器

讓我們建立一個應用，當用戶與一組卡片互動時，該應用會響應滑鼠事件。當滑鼠懸停在這些卡片上時，它們的事件將發生變化，並在控制檯中顯示訊息。程式碼如下 −

App.js

 
import React, { useState } from "react";
import "./App.css";

export default function App () {
   return (
      <div>
         <div
            className="card"
            onMouseEnter={e => console.log('Card 1 onMouseEnter')}
            onMouseOver={e => console.log('Card 1 onMouseOver')}
            onMouseDown={e => console.log('Card 1 onMouseDown')}
            onMouseUp={e => console.log('Card 1 onMouseUp')}
            onMouseLeave={e => console.log('Card 1 onMouseLeave')}
         >
            Card 1
         </div>
         <div className="card"
            onMouseEnter={e => console.log('Card 2 onMouseEnter')}
            onMouseOver={e => console.log('Card 2 onMouseOver')}
            onMouseDown={e => console.log('Card 2 onMouseDown')}
            onMouseUp={e => console.log('Card 2 onMouseUp')}
            onMouseLeave={e => console.log('Card 2 onMouseLeave')}
         >
            Card 2
         </div>
      </div>
   );
}

App.css

.App {
   font-family: sans-serif;
   text-align: center;
}
.loader {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh; /* Centers the loader vertically */
}

.card {
   background-color: skyblue;
   padding-left: 120px;
   margin-bottom: 20px;
   width: 200px;
   height: 40px;
}

輸出

當不同的滑鼠事件（例如 onMouseEnter、onMouseOver、onMouseDown、onMouseUp 和 onMouseLeave）觸發上述示例中的卡片時，App 元件會向控制檯傳送訊息。這些事件用於跟蹤和響應使用者與卡片的互動，例如滑鼠指標進入、懸停、點選或離開卡片。

示例 − 點選切換背景顏色

此應用將具有一個具有可點選區域的 <div> 元素。當我們點選 <div> 時，它將在兩種背景顏色之間切換：淺綠色和淺珊瑚色。該應用使用狀態來跟蹤點選狀態，並在切換背景顏色時將訊息記錄到控制檯。游標設定為指標以指示 <div> 可點選。

App.js

import React, { useState } from "react";

export default function App() {
   const [isClicked, setClicked] = useState(false);   
   const handleClick = () => {
      setClicked(!isClicked);
      console.log('Background Toggled');
   };   
   return (
      <div
         onClick={handleClick}
         style={{
            width: "200px",
            height: "100px",
            backgroundColor: isClicked ? "lightcoral" : "lightgreen",
            textAlign: "center",
            paddingTop: "25px",
            
            // lineHeight: "100px",
            cursor: "pointer",
         }}
         >
         Change Background Color App
      </div>
   );
}

輸出

示例 − 互動式按鈕應用

這是另一個使用 <div> 元素和各種 MouseEvent 處理程式的 React 應用。因此，我們將建立一個互動式按鈕狀 <div> 元素。當發生各種滑鼠事件（如單擊、滑鼠按下、滑鼠抬起、滑鼠離開、滑鼠進入和滑鼠懸停）時，它將向控制檯記錄訊息。div 將具有淺藍色背景，並且游標將更改為指標以指示其互動性。

App.js

import React from "react";

export default function App() {
   return (
      <div
         onClick={(e) => console.log('This is onClick')}
         onMouseDown={(e) => console.log('This is onMouseDown')}
         onMouseUp={(e) => console.log('This is onMouseUp')}
         onMouseLeave={(e) => console.log('This is onMouseLeave')}
         onMouseEnter={(e) => console.log('This is onMouseEnter')}
         onMouseOver={(e) => console.log('This is onMouseOver')}
         style={{
            width: "250px",
            height: "50px",
            backgroundColor: "lightblue",
            textAlign: "center",
            lineHeight: "50px",
            marginTop: "25px",
            cursor: "pointer",
         }}
         >
         Click and Hover Here
      </div>
   );
}

輸出

總結

因此，瞭解滑鼠事件和相關屬性對於使用 React 開發動態 Web 應用非常重要。透過使用這些事件，我們可以設計出對使用者互動做出響應的有吸引力的使用者體驗。React 為我們提供了建立懸停效果、處理按鈕點選和監視滑鼠移動所需的功能。