在 Expense Manager(费用管理器)应用程序中引入事件

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

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

为了更好地理解事件处理，让我们尝试将事件引入示例应用程序( Expense Manager(费用管理器)应用程序)。在本章中，我们尝试处理 Expense Manager(费用管理器)应用程序中的鼠标事件。鼠标事件只是用户使用鼠标执行的一些操作。这些包括悬停、单击、拖动或任何可以使用鼠标在应用程序上执行的操作。

处理 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 − 在组件的构造函数中绑定所有事件处理程序。

this.handleMouseEnter = this.handleMouseEnter.bind();
this.handleMouseLeave = this.handleMouseLeave.bind();
this.handleMouseOver = this.handleMouseOver.bind();

步骤 4 − 在 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);

      this.handleMouseEnter = this.handleMouseEnter.bind();
      this.handleMouseLeave = this.handleMouseLeave.bind();
      this.handleMouseOver = this.handleMouseOver.bind();
   }
   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 ReactDOM from 'react-dom';
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" }
]
ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItemList items={items} />
   </React.StrictMode>,
   document.getElementById('root')
);

使用 npm 命令为应用程序提供服务。

npm start

打开浏览器并在地址栏中输入 http://localhost:3000 并按 Enter。

应用程序将响应鼠标事件并突出显示当前选定的行。