React 中的事件處理

React 中的事件處理可讓您回應使用者交互，例如點擊、表單提交和其他事件。以下是基本概述和範例：

基本概念

1. 事件綁定：在 React 中，通常使用駝峰命名法作為事件名稱（例如 onClick、onChange）。
2. 事件處理：您可以直接在 JSX 中將函數傳遞為事件處理程序。
3. 合成事件：React 將原生事件包裝在合成事件中，以確保跨瀏覽器相容性。

例子

這是處理按鈕點擊和輸入變更的簡單範例：

import React, { useState } from 'react';

const EventHandlingExample = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    alert(`Button clicked! Input value: ${inputValue}`);
  };

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleChange} 
        placeholder="Type something..." 
      />
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default EventHandlingExample;

重點

• 狀態管理：使用useState來管理功能元件中的狀態。
• 事件物件：事件處理程序接收包含事件資訊的事件物件。
• 防止預設：使用 event.preventDefault() 來防止事件的預設行為（例如表單提交）。

如果您需要具體範例或進一步解釋，請隨時詢問！

以上是React 中的事件處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！