在 React 中，事件监听和交互处理是构建动态用户界面的核心机制。React 提供了一套声明式的事件系统，让你可以轻松响应用户的操作（如点击、输入、悬停等），并通过更新组件的 state 来驱动 UI 变化。

🔹 1. 事件监听的基本方式

React 使用 JSX 语法 来绑定事件处理器，事件名采用小驼峰命名法（如 onClick、onChange），其值是一个函数。

function Button() {
  function handleClick() {
    alert('按钮被点击了！');
  }

  return (
    <button onClick={handleClick}>
      点我
    </button>
  );
}

⚠️ 注意：

• onClick={handleClick} 是传递函数引用，不要写成 onClick={handleClick()}（这会立即执行）。

• 事件处理器通常定义在组件内部，以便访问 props 和 state。

🔹 2. 常见的事件类型

🔹 3. 结合状态（State）实现交互

使用 useState Hook 来管理状态，并在事件中更新它，从而实现交互。

示例：计数器

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1); // 或使用函数式更新：setCount(c => c + 1)
  }

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

✅ 关键点：

• 状态更新是异步的，React 会批量处理多个状态更新。

• 使用 函数式更新（如 setCount(c => c + 1)）可以确保基于最新状态进行计算，避免竞态条件。

🔹 4. 事件对象（Event Object）

事件处理器接收一个 合成事件（SyntheticEvent） 对象，它是跨浏览器兼容的封装。

示例：获取输入框值

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(e) {
    setText(e.target.value); // e.target 指向触发事件的 DOM 元素
  }

  return (
    <input value={text} onChange={handleChange} placeholder="输入文字" />
  );
}

💡 提示：在 TypeScript 中，建议为事件参数添加类型，如：

function handleChange(e: React.ChangeEvent<HTMLInputElement>)

🔹 5. 事件传播与阻止默认行为

• e.stopPropagation()：阻止事件冒泡到父元素。

• e.preventDefault()：阻止表单提交等默认行为。

function Form() {
  const [value, setValue] = useState('');

  function handleSubmit(e) {
    e.preventDefault(); // 阻止页面刷新
    console.log('提交内容:', value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">提交</button>
    </form>
  );
}

🔹 6. 状态作为“快照”

每次渲染时，事件处理器“看到”的是当时渲染对应的 state 快照。

function Example() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setTimeout(() => {
      alert(count); // 始终弹出点击时的 count 值（不是最新的）
    }, 3000);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      <button onClick={handleClick}>延迟显示 count</button>
    </div>
  );
}

📌 如果需要获取最新值，可结合 useRef 或在 setTimeout 中使用函数式更新。

🔹 7. 最佳实践

• 避免内联复杂逻辑：将事件处理函数提取为独立函数，提升可读性。

• 合理传递事件处理器：通过 props 将事件处理函数传递给子组件，实现父子通信。

• 使用受控组件：表单元素的值由 state 控制，确保数据一致性。

• 批量更新优化性能：React 自动批量处理同一事件中的多个 setState。

参考资料

• 响应事件 – React 中文文档

• 用 State 响应输入 – React 中文文档

• state 如同一张快照 – React 中文文档