跳转到主要内容

响应事件

React 通过事件处理函数来响应用户交互：点击、输入、滚动、提交表单等。你把一个函数传给 JSX 属性（例如 onClick），当事件发生时 React 会调用它。

最小例子：点击按钮

TypeScript
export default function Button() {
  function handleClick() {
    alert('你点击了按钮！');
  }

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

把事件处理函数当作 props 传下去

这是一种常见模式：父组件拥有“做什么”的逻辑，子组件只负责触发。

TypeScript
function Child({ onAdd }: { onAdd: () => void }) {
  return <button onClick={onAdd}>+1</button>;
}

export default function Parent() {
  function handleAdd() {
    console.log('加一');
  }

  return <Child onAdd={handleAdd} />;
}
小技巧
如果你发现 props 一层层往下传很痛苦，可以考虑 Context，但别急着上 Context。 很多时候把组件拆小、把 state 往上提就够了。

阻止默认行为：表单不会刷新页面

TypeScript
export default function Newsletter() {
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    alert('这里改成你自己的提交逻辑');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" placeholder="email@example.com" />
      <button type="submit">订阅</button>
    </form>
  );
}

事件冒泡与 stopPropagation

在 DOM 里，事件会从内到外冒泡。你经常会遇到“点了按钮却触发了卡片点击”的情况。

TypeScript
export default function Card() {
  function onCardClick() {
    alert('打开详情页');
  }

  function onDeleteClick(e: React.MouseEvent) {
    e.stopPropagation();
    alert('删除');
  }

  return (
    <div onClick={onCardClick} role="button" tabIndex={0}>
      <span>一张卡片</span>
      <button onClick={onDeleteClick}>删除</button>
    </div>
  );
}

进一步阅读

  • 更系统的事件细节（合成事件、事件对象等）见 事件处理。
  • 想理解“点击后为什么 UI 会更新”，先读 状态响应。

动手练习

运行并修改下面的组件，熟悉交互式示例的编辑与预览。

🌐浏览器运行
响应事件 - React 文档 - React 文档