ReactJS - UI事件處理器

在Web開發中，構建易於使用且能夠根據我們與之互動而變化的網站和應用程式是一件大事。想象一下，當我們點選按鈕、向下滾動網頁或在鍵盤上輸入內容時——這些操作就是我們所說的使用者介面事件。它們就像構建模組，讓我們能夠在網站上執行操作。因此，在本教程中，我們將瞭解UI事件處理器。

首先，讓我們定義UI事件。它是一個術語，用於描述網頁上的簡單使用者介面事件，例如點選連結、向下滾動頁面或移動滑鼠。UI事件是事件型別族譜的成員，其中包括MouseEvent、TouchEvent、FocusEvent等。它們各自表示使用者可以在網站上執行的不同活動。

語法

<div
   onScroll={e => console.log('I am in onScroll method')}
/>

引數

e − 這是一個React事件物件。

UI事件屬性

示例

示例

我們可以在React元件中的div元素上使用onScroll事件來確定使用者何時在該div內滾動。當滾動事件發生時，事件處理器被啟用，幫助我們執行某些操作。以下是我們的App.js檔案的程式碼：

我們匯入了React並建立了App函式元件。我們定義了onScroll函式，它是onScroll事件處理器。在這個例子中，當div被滾動時，它會在控制檯列印“I am onScroll”。

我們在return語句中插入一個div元素，並將onScroll屬性設定為onScroll方法。我們還向div新增額外的CSS樣式以使其可滾動。

import React from "react";

function App() {
   const onScroll = (e) => {
      console.log("I am onScroll");
   };   
   return (
      <div
         onScroll={onScroll}
         style={{
            height: "200px", // Add fixed height to create scrollable div
            overflow: "scroll" // Add scrollbars
         }}
      >
         <div style={{ height: "600px" }}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
         </div>
      </div>
   );
}

export default App;

輸出

當我們啟動React應用程式並在div內滾動時，每次發生滾動事件時，控制檯都會顯示“I am onScroll”。這是一個簡單的例子，說明如何使用onScroll事件處理器在React元件中響應使用者的滾動操作。

示例 - 滾動追蹤應用

此應用程式在我們向下滾動時跟蹤並顯示頁面的當前垂直滾動位置。它使用onScroll事件來更新滾動位置並在頁面上顯示它。程式碼如下：

import React, { useState } from 'react';

function App() {
   const [scrollPosition, setScrollPosition] = useState(0);   
   const handleScroll = () => {
      setScrollPosition(window.scrollY);
   };
   
   window.addEventListener('scroll', handleScroll);   
   return (
      <div>
         <h1>Scroll Tracker</h1>
         <p>Scroll Position: {scrollPosition}</p>
         <div style={{ height: '100vh', border: '1px solid #ccc' }}>
            Scroll down to see the position.
         </div>
      </div>
   );
}

export default App;

輸出

示例 - 滾動到頂部按鈕

在這個應用中，我們將有一個“滾動到頂部”按鈕，當我們向下滾動頁面時，該按鈕會顯示出來。當我們點選該按鈕時，它會平滑地將頁面滾動到頂部。它利用onScroll事件來確定何時顯示按鈕，並在點選按鈕時觸發scrollTo函式。

import React, { useState } from 'react';

function App() {
   const [showButton, setShowButton] = useState(false);   
   const handleScroll = () => {
      const scrollY = window.scrollY;
      setShowButton(scrollY > 200); // Show button when scrolled down
   };   
   const scrollToTop = () => {
      window.scrollTo({
         top: 0,
         behavior: 'smooth',
      });
   };   
   window.addEventListener('scroll', handleScroll);   
   return (
      <div>
         <h1>Scroll to Top Button</h1>
         <div style={{ height: '150vh', border: '1px solid #ccc' }}>
            Scroll down to see the button.
         </div>
         {showButton && (
         <button onClick={scrollToTop} style={{ position: 'fixed', bottom: '20px', right: '20px' }}>
            Scroll to Top
         </button>
      )}
      </div>
   );
}

export default App;

輸出

總結

UI事件處理器允許我們響應Web使用者的活動。這些屬性描述了互動，例如點選了什麼或滾動到多遠。Web開發者可以使用這些處理器和特性來建立流暢且引人入勝的使用者體驗。