在 React 中處理事件是建立互動式 Web 應用程式的重要方面。本指南將向您介紹 React 中事件處理的基礎知識，包括新增事件處理程序、了解合成事件、向事件處理程序傳遞參數、建立自訂事件和事件委託。
事件處理
在 JSX 中新增事件處理程序
在 React 中，您可以直接在 JSX 中新增事件處理程序。事件處理程序是在發生特定事件（例如按一下按鈕或表單提交）時呼叫的函數。 React 的事件處理類似於處理常規 HTML 中的事件，但有一些差異。
新增事件處理程序的範例：
import React from 'react';
const handleClick = () => {
alert('Button clicked!');
};
const App = () => {
return (
<div>
<button onClick={handleClick}>Click Me</button>
</div>
);
};
export default App;
登入後複製
在此範例中，每當按一下按鈕時都會呼叫handleClick 函數。 JSX 中的 onClick 屬性用於指定事件處理程序。
綜合事件
React 使用稱為合成事件的系統來處理事件。合成事件是瀏覽器本機事件系統的跨瀏覽器包裝。這可確保事件在不同瀏覽器中表現一致。
合成事件範例：
import React from 'react';
const handleInputChange = (event) => {
console.log('Input value:', event.target.value);
};
const App = () => {
return (
<div>
<input type="text" onChange={handleInputChange} />
</div>
);
};
export default App;
登入後複製
在此範例中，handleInputChange 函數會在輸入欄位的值發生變更時記錄它。事件參數是一個合成事件，它在所有瀏覽器中提供一致的事件屬性。
將參數傳遞給事件處理程序
有時，您需要將額外的參數傳遞給事件處理程序。這可以使用箭頭函數或綁定方法來完成。
使用箭頭函數的範例：
import React from 'react';
const handleClick = (message) => {
alert(message);
};
const App = () => {
return (
<div>
<button onClick={() => handleClick('Button clicked!')}>Click Me</button>
</div>
);
};
export default App;
登入後複製
使用綁定方法的範例：
import React from 'react';
const handleClick = (message) => {
alert(message);
};
const App = () => {
return (
<div>
<button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
</div>
);
};
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 (
<button ref={buttonRef} onClick={handleClick}>
Trigger Custom Event
</button>
);
};
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 (
<div onClick={handleClick}>
<button>1</button>
<button>2</button>
<button>3</button>
</div>
);
};
export default App;
登入後複製
在此範例中，div 元素上的單一事件處理程序管理所有按鈕的按一下事件。事件處理程序檢查 event.target 以確定單擊了哪個按鈕並相應地顯示警報。
結論
在 React 中處理事件對於建立互動式應用程式至關重要。透過了解如何新增事件處理程序、使用合成事件、將參數傳遞給事件處理程序、建立自訂事件以及利用事件委託，您可以建立更動態且高效的 React 應用程式。隨著經驗的積累，這些技術將成為第二天性，讓您輕鬆創建複雜的互動。
以上是實習生等級：在 React 中處理事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
