13. 事件处理基础

本节目标：理解 React 事件系统的设计思路，掌握绑定事件的基本写法，能写出可交互的按钮和表单。

事件在 React 里怎么写

原生 HTML 里我们这样写事件：

<button onclick="handleClick()">点击</button>

React 里完全不同。你看这个例子：

export default function Button() {
  function handleClick() {
    alert('你点了我');
  }

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

注意几个关键差异：事件名用 onClick 驼峰命名，不是 onclick。花括号里放的是函数引用 handleClick，不是字符串。

常见新手错误

写成 onClick={handleClick()} 带括号的，会在渲染时立即执行函数，而不是等用户点击。传引用，别调用。

什么是合成事件

React 的事件系统有个专门的名字：合成事件（SyntheticEvent）。

浏览器原生事件各有各的接口，React 做了一层统一封装。你在 React 里用的 onClick、onChange、onSubmit，底层都是 SyntheticEvent 对象。它兼容所有浏览器，你不用操心 IE 的兼容问题。

function handleClick(e) {
  // e 就是 SyntheticEvent
  console.log(e.type); // "click"
}

跨浏览器兼容

SyntheticEvent 的 API 和原生 Event 一致，但 React 帮你抹平了浏览器差异。你只管用，不用 polyfill。

事件处理函数的两种写法

写法一：具名函数（推荐）

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('提交了');
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

写法二：内联箭头函数

function Form() {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log('提交了');
    }}>
      ...
    </form>
  );
}

两种都能跑，但具名函数更清晰。逻辑复杂时内联会让 JSX 变得臃肿。

什么时候用内联

当你需要传额外参数时，内联更方便：onClick={() => handleDelete(item.id)}。

事件处理器可以做什么

不只是弹个 alert，常见操作有这些：

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

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        计数：{count}
      </button>
      <a href="https://example.com" onClick={(e) => e.preventDefault()}>
        阻止跳转
      </a>
    </>
  );
}

更新状态（触发重渲染）
阻止默认行为（e.preventDefault()）
发送网络请求
读取表单值

事件命名规则一览

React 的事件名遵循 camelCase，和 DOM 全小写不同：

原生 DOM	React
`onclick`	`onClick`
`onchange`	`onChange`
`onsubmit`	`onSubmit`
`onmouseover`	`onMouseOver`
`onkeydown`	`onKeyDown`

完整事件列表

React 支持绝大多数 DOM 事件。常用的有 onClick、onChange、onSubmit、onFocus、onBlur、onKeyDown。需要时查文档就行。

本节小结

React 事件用 camelCase 命名，花括号传函数引用
合成事件统一了浏览器差异
传函数引用 handleClick，别带括号 handleClick()
具名函数优先，内联箭头函数适合传参场景