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 为我们提供了创建悬停效果、处理按钮点击和监视鼠标移动所需的功能。