實習生等級：在 React 中處理事件-js教程-PHP中文網

Intern level: Handling Events in React

在 React 中處理事件是建立互動式 Web 應用程式的重要方面。本指南將向您介紹 React 中事件處理的基礎知識，包括新增事件處理程序、了解合成事件、向事件處理程序傳遞參數、建立自訂事件和事件委託。

事件處理

在 JSX 中新增事件處理程序

在 React 中，您可以直接在 JSX 中新增事件處理程序。事件處理程序是在發生特定事件（例如按一下按鈕或表單提交）時呼叫的函數。 React 的事件處理類似於處理常規 HTML 中的事件，但有一些差異。

新增事件處理程序的範例：

import React from 'react'; const handleClick = () => { alert('Button clicked!'); }; const App = () => { return (   
 ); }; export default App;

登入後複製

在此範例中，每當按一下按鈕時都會呼叫handleClick 函數。 JSX 中的 onClick 屬性用於指定事件處理程序。

綜合事件

React 使用稱為合成事件的系統來處理事件。合成事件是瀏覽器本機事件系統的跨瀏覽器包裝。這可確保事件在不同瀏覽器中表現一致。

合成事件範例：

import React from 'react'; const handleInputChange = (event) => { console.log('Input value:', event.target.value); }; const App = () => { return (   
 ); }; export default App;

登入後複製

在此範例中，handleInputChange 函數會在輸入欄位的值發生變更時記錄它。事件參數是一個合成事件，它在所有瀏覽器中提供一致的事件屬性。

將參數傳遞給事件處理程序

有時，您需要將額外的參數傳遞給事件處理程序。這可以使用箭頭函數或綁定方法來完成。

使用箭頭函數的範例：

import React from 'react'; const handleClick = (message) => { alert(message); }; const App = () => { return (   
 ); }; export default App;

登入後複製

使用綁定方法的範例：

import React from 'react'; const handleClick = (message) => { alert(message); }; const App = () => { return (   
 ); }; export default App;

登入後複製

這兩種方法都允許您向handleClick 函數傳遞附加參數。

自訂事件處理

建立自訂事件

雖然 React 的合成事件涵蓋了大多數典型用例，但您可能需要為更複雜的互動建立自訂事件。可以使用 CustomEvent 建構子和dispatchEvent 方法建立和調度自訂事件。

建立和調度自訂事件的範例：

import React, { useEffect, useRef } from 'react'; const CustomEventComponent = () => { const buttonRef = useRef(null); useEffect(() => { const handleCustomEvent = (event) => { alert(event.detail.message); }; const button = buttonRef.current; button.addEventListener('customEvent', handleCustomEvent); return () => { button.removeEventListener('customEvent', handleCustomEvent); }; }, []); const handleClick = () => { const customEvent = new CustomEvent('customEvent', { detail: { message: 'Custom event triggered!' }, }); buttonRef.current.dispatchEvent(customEvent); }; return (  ); }; export default CustomEventComponent;

登入後複製

在此範例中，按一下按鈕時將建立並調度名為 customEvent 的自訂事件。事件處理程序會偵聽自訂事件並顯示帶有事件詳細訊息的警報。

React 中的事件委託

事件委託是一種使用單一事件偵聽器來管理多個元素的事件的技術。這對於有效管理事件非常有用，尤其是在清單或表格中。

事件委託範例：

import React from 'react'; const handleClick = (event) => { if (event.target.tagName === 'BUTTON') { alert(`Button ${event.target.textContent} clicked!`); } }; const App = () => { return (     
 ); }; export default App;

登入後複製

在此範例中，div 元素上的單一事件處理程序管理所有按鈕的按一下事件。事件處理程序檢查 event.target 以確定單擊了哪個按鈕並相應地顯示警報。