在支出管理器APP中介绍事件

---

---

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

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

为了更好地理解事件处理，让我们尝试在一个示例应用程序（支出管理器APP）中介绍事件。在本节中，我们将尝试在支出管理器应用程序中处理鼠标事件。鼠标事件只是用户使用鼠标执行的一些操作。这些包括悬停、单击、拖动或任何可以使用鼠标在应用程序上执行的操作。

在支出管理器APP中处理事件

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

步骤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

打开浏览器并在地址栏中输入https://:3000，然后按回车键。

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