第 3 课：点击事件与回调

日期：2026-09-02
课程序号：第 3 课
知识点：onClick 与函数引用

用途

让组件向用户操作作出响应。

核心概念

onClick 接收函数，不能在渲染时直接调用处理函数。
事件回调也可以通过 Props 从父组件传入。

最小代码或操作示例

jsx

function LessonButton({ onStart }) {
  return <button onClick={onStart}>开始学习</button>;
}
export default function App() {
  function handleStart() { window.alert("开始练习"); }
  return <LessonButton onStart={handleStart} />;
}

3～5 分钟练习

增加“复习”按钮，点击后显示“开始复习”，确认页面加载时不弹窗。

参考答案

jsx

// 放入组件返回的容器内：
<button onClick={() => window.alert("开始复习")}>复习</button>

与上一课的联系

上一课通过 Props 传数据；本课通过 Props 传回调，把操作交给父组件。