在支出管理器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，然後按回車鍵。

應用程式將響應滑鼠事件並突出顯示當前選擇的行。