在 Expense Manager APP 中引入事件

在前几章中，我们已经了解到事件只是用户与应用程序交互时执行的一些动作。这些动作可以是最小的操作，比如将鼠标指针悬停在元素上以触发下拉菜单、调整应用程序窗口大小，或者拖放元素以上传它们等。

对于这些事件中的每一种，JavaScript 都会提供响应。因此，每次用户执行事件时，通常都需要应用程序做出某种反应；这些反应被定义为一些函数或代码块，称为 事件处理程序。

为了更好地理解事件处理，让我们尝试在一个示例应用程序（Expense Manager APP）中引入事件。本章中，我们将尝试在 expense manager app 中处理 Mouse Events。Mouse events 只是用户使用鼠标执行的一些动作。这些包括悬停、点击、拖动，或者使用鼠标在应用程序上执行的任何其他动作。

Expense Manager 应用中的事件处理

让我们在我们的支出应用中进行一些事件管理。我们可以尝试在用户将光标移到表格中的支出条目上时，高亮显示该支出条目。

步骤 1 − 在您喜欢的编辑器中打开 expense-manager 应用。

打开 ExpenseEntryItemList.js 文件，并添加一个方法 handleMouseEnter 来处理用户将鼠标指针移入支出项目（td - 表格单元格）时触发的事件（onMouseEnter）。

handleMouseEnter(e) { 
   e.target.parentNode.classList.add("highlight"); 
}

在这里，

• 事件处理器尝试使用 parentNode 方法找到事件目标 (td) 节点的父节点 (tr)。parentNode 方法是标准的 DOM 方法，用于查找当前节点的直接父节点。

• 一旦找到父节点，事件处理器访问附加到父节点的 css 类列表，并使用 add 方法添加 'highlight' 类。classList 是标准的 DOM 属性，用于获取节点附加的类列表，可以用来向 DOM 节点添加/移除类。

步骤 2 − 接下来，添加一个方法 handleMouseLeave() 来处理用户移出支出项目时触发的事件。

handleMouseLeave(e) { 
   e.target.parentNode.classList.remove("highlight"); 
}

在这里，事件处理器从 DOM 中移除 highlight 类。

添加另一个方法 handleMouseOver() 来检查鼠标当前位置。可选地，可以在 DOM 中查找鼠标指针的位置。

handleMouseOver(e) { 
   console.log("The mouse is at (" + e.clientX + ", " + e.clientY + ")"); 
}

步骤 3 − 在 render 方法中将事件处理器附加到相应的标签上。

render() {
   const lists = this.props.items.map((item) =>
      <tr key={item.id} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         <td>{item.name}</td>
         <td>{item.amount}</td>
         <td>{new Date(item.spendDate).toDateString()}</td>
         <td>{item.category}</td>
      </tr>
   );
   return (
      <table onMouseOver={this.handleMouseOver}>
         <thead>
            <tr>
               <th>Item</th>
               <th>Amount</th>
               <th>Date</th>
               <th>Category</th>
            </tr>
         </thead>
         <tbody>
            {lists}
         </tbody>
      </table>
   );
}

ExpenseEntryItemList 的最终完整代码如下 −

import React from 'react';
import './ExpenseEntryItemList.css';

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
   handleMouseEnter(e) {
      e.target.parentNode.classList.add("highlight");
   }
   handleMouseLeave(e) {
      e.target.parentNode.classList.remove("highlight");
   }
   handleMouseOver(e) {
      console.log("The mouse is at (" + e.clientX + ", " + e.clientY + ")");
   }
   render() {
      const lists = this.props.items.map((item) =>
         <tr key={item.id} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
            <td>{item.name}</td>
            <td>{item.amount}</td>
            <td>{new Date(item.spendDate).toDateString()}</td>
            <td>{item.category}</td>
         </tr>
      );
      return (
         <table onMouseOver={this.handleMouseOver}>
            <thead>
               <tr>
                  <th>Item</th>
                  <th>Amount</th>
                  <th>Date</th>
                  <th>Category</th>
               </tr>
            </thead>
            <tbody>
               {lists}
            </tbody>
         </table>
      );
   }
}
export default ExpenseEntryItemList;

ExpenseEntryItemList.css:

接下来，打开 css 文件 ExpenseEntryItemList.css，并添加一个 css 类 highlight。

tr.highlight td { 
   background-color: #a6a8bd; 
}

index.js

打开 index.js 并使用 ExpenseEntryItemList 组件。

import React from 'react';
import { createRoot } from 'react-dom/client';
import ExpenseEntryItemList from './components/ExpenseEntryItemList'

const items = [
   { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
   { id: 2, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
   { id: 3, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
   { id: 4, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
   { id: 5, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
   { id: 6, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
   { id: 7, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
   { id: 8, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
   { id: 9, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
   { id: 10, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
]

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<ExpenseEntryItemList items={items} />);

使用 npm 命令启动应用。

npm start

打开浏览器，在地址栏输入 http://localhost:3000 并按回车。

应用将响应鼠标事件并高亮显示当前选中的行。